From 4b16828b087932c6390f42798224783d5d0eaa74 Mon Sep 17 00:00:00 2001
From: Huanyi Xie <74809554+xiehuanyi@users.noreply.github.com>
Date: Tue, 6 Oct 2026 10:54:09 +0300
Subject: [PATCH 1/2] docs(next): wire routes through getPageData and a client
 renderer

---
 packages/next/README.md | 34 +++++++++++++++++++++++++++++++---
 1 file changed, 31 insertions(+), 3 deletions(-)

diff --git a/packages/next/README.md b/packages/next/README.md
index fb4807e3..987b5238 100644
--- a/packages/next/README.md
+++ b/packages/next/README.md
@@ -13,9 +13,10 @@ npm install @json-render/core @json-render/react @json-render/next
 ### 1. Define your application spec
 
 ```typescript
+// lib/spec.ts
 import type { NextAppSpec } from "@json-render/next";
 
-const spec: NextAppSpec = {
+export const spec: NextAppSpec = {
   metadata: {
     title: { default: "My App", template: "%s | My App" },
   },
@@ -49,15 +50,42 @@ const spec: NextAppSpec = {
 ```typescript
 // lib/app.ts
 import { createNextApp } from "@json-render/next/server";
+import { spec } from "./spec";
 
-export const { Page, generateMetadata, generateStaticParams } = createNextApp({ spec });
+export const { getPageData, generateMetadata, generateStaticParams } = createNextApp({ spec });
 ```
 
 ### 3. Wire up Next.js routes
 
 ```tsx
 // app/[[...slug]]/page.tsx
-export { Page as default, generateMetadata, generateStaticParams } from "@/lib/app";
+import { notFound } from "next/navigation";
+import { getPageData } from "@/lib/app";
+import { SiteRenderer } from "./renderer";
+
+export { generateMetadata, generateStaticParams } from "@/lib/app";
+
+export default async function Page({
+  params,
+}: {
+  params: Promise<{ slug?: string[] }>;
+}) {
+  const data = await getPageData({ params });
+  if (!data) notFound();
+  return <SiteRenderer {...data} />;
+}
+```
+
+```tsx
+// app/[[...slug]]/renderer.tsx
+"use client";
+
+import { PageRenderer } from "@json-render/next";
+import type { PageRendererProps } from "@json-render/next";
+
+export function SiteRenderer(props: PageRendererProps) {
+  return <PageRenderer {...props} />;
+}
 ```
 
 ```tsx

From 2df2cfc8ef861ea131e8d07476abcdc0922392ee Mon Sep 17 00:00:00 2001
From: Huanyi Xie <74809554+xiehuanyi@users.noreply.github.com>
Date: Tue, 6 Oct 2026 10:57:02 +0300
Subject: [PATCH 2/2] docs(next): keep provider handlers inside a client
 boundary

---
 packages/next/README.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/next/README.md b/packages/next/README.md
index 987b5238..14da7cd0 100644
--- a/packages/next/README.md
+++ b/packages/next/README.md
@@ -90,6 +90,8 @@ export function SiteRenderer(props: PageRendererProps) {
 
 ```tsx
 // app/[[...slug]]/layout.tsx
+"use client";
+
 import { NextAppProvider } from "@json-render/next";
 import { registry, handlers } from "@/lib/registry";