Home Verkennen Help
Registreren Inloggen
suby
/
json-render
1
0
Vork 0
Bestanden Issues 0 Pull-aanvragen 0 Wiki
Boom: ee596e4901
Aftakkingen Labels
json-render
/
packages
/
next
Chris Tate eebc6e4f4f better ignore (#263) 3 maanden geleden
..
src a99d68c481 next (#246) 3 maanden geleden
CHANGELOG.md 9adcc09204 chore: version packages (#248) 3 maanden geleden
README.md a99d68c481 next (#246) 3 maanden geleden
package.json eebc6e4f4f better ignore (#263) 3 maanden geleden
tsconfig.json a99d68c481 next (#246) 3 maanden geleden
tsup.config.ts eebc6e4f4f better ignore (#263) 3 maanden geleden

README.md

@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/next

Quick 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 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 for full API reference.