npm package: @json-render/next
Description: Next.js renderer for @json-render/core. JSON becomes full Next.js applications with routes, layouts, metadata, and SSR.
Latest version: 0.17.0

# @json-render/next

Next.js renderer for [@json-render/core](https://json-render.dev). JSON becomes full Next.js applications with routes, layouts, metadata, and SSR.

## Installation

```bash
npm install @json-render/core @json-render/react @json-render/next
```

## Quick Start

### 1. Define your application spec

```typescript
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

```typescript
// lib/app.ts
import { createNextApp } from "@json-render/next/server";

export const { Page, generateMetadata, generateStaticParams } = createNextApp({ spec });
```

### 3. Wire up Next.js routes

```tsx
// app/[[...slug]]/page.tsx
export { Page as default, generateMetadata, generateStaticParams } from "@/lib/app";
```

```tsx
// 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 `Slot` component 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** -- `generateStaticParams` for pre-rendering
- **Client navigation** -- Built-in `Link` component wrapping `next/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](https://json-render.dev/docs/api/next) for full API reference.