@json-render/next
v0.17.0
Published
Next.js renderer for @json-render/core. JSON becomes full Next.js applications with routes, layouts, metadata, and SSR.
Downloads
767
Readme
@json-render/next
Next.js renderer for @json-render/core. JSON becomes full Next.js applications with routes, layouts, metadata, and SSR.
Installation
npm install @json-render/core @json-render/react @json-render/nextQuick Start
1. Define your application spec
import type { NextAppSpec } from "@json-render/next";
const spec: NextAppSpec = {
metadata: {
title: { default: "My App", template: "%s | My App" },
},
layouts: {
main: {
root: "shell",
elements: {
shell: { type: "Container", props: {}, children: ["nav", "slot"] },
nav: { type: "NavBar", props: {}, children: [] },
slot: { type: "Slot", props: {}, children: [] },
},
},
},
routes: {
"/": {
layout: "main",
metadata: { title: "Home" },
page: { root: "hero", elements: { hero: { type: "Card", props: { title: "Welcome" }, children: [] } } },
},
"/about": {
layout: "main",
metadata: { title: "About" },
page: { root: "content", elements: { content: { type: "Card", props: { title: "About" }, children: [] } } },
},
},
};2. Create the app
// lib/app.ts
import { createNextApp } from "@json-render/next/server";
export const { Page, generateMetadata, generateStaticParams } = createNextApp({ spec });3. Wire up Next.js routes
// app/[[...slug]]/page.tsx
export { Page as default, generateMetadata, generateStaticParams } from "@/lib/app";// app/[[...slug]]/layout.tsx
import { NextAppProvider } from "@json-render/next";
import { registry, handlers } from "@/lib/registry";
export default function Layout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>
<NextAppProvider registry={registry} handlers={handlers}>
{children}
</NextAppProvider>
</body>
</html>
);
}Features
- Pages as spec -- Define entire multi-page apps in JSON
- Route matching -- Dynamic segments (
[slug]), catch-all ([...path]), optional catch-all ([[...path]]) - Nested layouts -- Reusable layouts with
Slotcomponent for content injection - SEO metadata -- Per-route metadata with title templates, OpenGraph, Twitter cards
- SSR -- Server-side rendering via Next.js App Router
- Data loaders -- Server-side async data loading before page render
- Static generation --
generateStaticParamsfor pre-rendering - Client navigation -- Built-in
Linkcomponent wrappingnext/link - Error/Loading/NotFound -- Per-route error boundaries, loading states, and 404 pages
- AI streaming -- Generate entire apps with JSONL patches via
SpecStream
Entry Points
| Import | Description |
| -------------------------- | ------------------------------------------------ |
| @json-render/next | Client components (NextAppProvider, PageRenderer) |
| @json-render/next/server | Server utilities (createNextApp, matchRoute) |
Documentation
See the json-render documentation for full API reference.