How to install next?

vercel-labs/json-render/next

$npx -y skills add vercel-labs/json-render --skill next

Installs into the current project.

Summary

Next.js renderer for json-render that turns JSON specs into full Next.js applications with routes, layouts, SSR, and metadata. Use when working with @json-render/next, building Next.js apps from JSON specs, or creating AI-generated multi-page applications.

Files · 1

View on GitHub

SKILL.md

1	# @json-render/next
2
3	Next.js renderer that converts JSON specs into full Next.js applications with routes, pages, layouts, metadata, and SSR support.
4
5	## Quick Start
6
7	```bash
8	npm install @json-render/core @json-render/react @json-render/next
9	```
10
11	### 1. Define Your Spec
12
13	```typescript
14	// lib/spec.ts
15	import type { NextAppSpec } from "@json-render/next";
16
17	export const spec: NextAppSpec = {
18	metadata: {
19	title: { default: "My App", template: "%s \| My App" },
20	description: "A json-render Next.js application",
21	},
22	layouts: {
23	main: {
24	root: "shell",
25	elements: {
26	shell: { type: "Container", props: {}, children: ["nav", "slot"] },
27	nav: { type: "NavBar", props: { links: [
28	{ href: "/", label: "Home" },
29	{ href: "/about", label: "About" },
30	]}, children: [] },
31	slot: { type: "Slot", props: {}, children: [] },
32	},
33	},
34	},
35	routes: {
36	"/": {
37	layout: "main",
38	metadata: { title: "Home" },
39	page: {
40	root: "hero",
41	elements: {
42	hero: { type: "Card", props: { title: "Welcome" }, children: [] },
43	},
44	},
45	},
46	"/about": {
47	layout: "main",
48	metadata: { title: "About" },
49	page: {
50	root: "content",
51	elements: {
52	content: { type: "Card", props: { title: "About Us" }, children: [] },
53	},
54	},
55	},
56	},
57	};
58	```
59
60	### 2. Create the App
61
62	```typescript
63	// lib/app.ts
64	import { createNextApp } from "@json-render/next/server";
65	import { spec } from "./spec";
66
67	export const { Page, generateMetadata, generateStaticParams } = createNextApp({
68	spec,
69	loaders: {
70	// Server-side data loaders (optional)
71	loadPost: async ({ slug }) => {
72	const post = await getPost(slug as string);
73	return { post };
74	},
75	},
76	});
77	```
78
79	### 3. Wire Up Route Files
80
81	```tsx
82	// app/[[...slug]]/page.tsx
83	export { Page as default, generateMetadata, generateStaticParams } from "@/lib/app";
84	```
85
86	```tsx
87	// app/[[...slug]]/layout.tsx
88	import { NextAppProvider } from "@json-render/next";
89	import { registry, handlers } from "@/lib/registry";
90
91	export default function Layout({ children }: { children: React.ReactNode }) {
92	return (
93	<html lang="en">
94	<body>
95	<NextAppProvider registry={registry} handlers={handlers}>
96	{children}
97	</NextAppProvider>
98	</body>
99	</html>
100	);
101	}
102	```
103
104	## Key Concepts
105
106	### NextAppSpec
107
108	The top-level spec defines an entire Next.js application:
109
110	- metadata: Root-level SEO metadata (title template, description, OpenGraph)
111	- layouts: Reusable layout element trees (each must include a `Slot` component)
112	- routes: Route definitions keyed by URL pattern
113	- state: Global initial state shared across all routes
114
115	### Route Patterns
116
117	Routes use Next.js URL conventions:
118
119	- `"/"` -- home page
120	- `"/about"` -- static route
121	- `"/blog/[slug]"` -- dynamic segment
122	- `"/docs/[...path]"` -- catch-all segment
123	- `"/settings/[[...path]]"` -- optional catch-all segment
124
125	### Layouts
126
127	Layouts wrap page content. Every layout MUST include a `Slot` component where page content will be rendered. Layouts are defined once in `spec.layouts` and referenced by routes via the `layout` field.
128
129	### Built-in Components
130
131	- Slot: Placeholder in layouts where page content is rendered
132	- Link: Client-side navigation link (wraps `next/link`)
133
134	### Built-in Actions
135
136	- setState: Update state value. Params: `{ statePath, value }`
137	- pushState: Append to array. Params: `{ statePath, value, clearStatePath? }`
138	- removeState: Remove from array by index. Params: `{ statePath, index }`
139	- navigate: Client-side navigation. Params: `{ href }`
140
141	### Data Loaders
142
143	Server-side async functions that run in the Server Component before rendering. Results are merged into the page's initial state.
144
145	```typescript
146	createNextApp({
147	spec,
148	loaders: {
149	loadPost: async ({ slug }) => {
150	const post = await db.post.findUnique({ where: { slug } });
151	return { post };
152	},
153	},
154	});
155	```
156
157	### SSR
158
159	Pages are server-rendered automatically. The `createNextApp` `Page` component is an async Server Component that:
160
161	1. Matches the route from the spec
162	2. Runs server-side data loaders
163	3. Generates metadata
164	4. Passes the resolved spec to the client renderer for hydration
165
166	### Entry Points
167
168	- `@json-render/next` -- Client components (NextAppProvider, PageRenderer, Link)
169	- `@json-render/next/server` -- Server utilities (createNextApp, matchRoute, schema)
170
171	## API Reference
172
173	### Server Exports (`@json-render/next/server`)
174
175	- `createNextApp(options)` -- Create Page, generateMetadata, generateStaticParams
176	- `schema` -- Custom schema for Next.js apps (for AI catalog generation)

People who liked this also viewed

6 picks

Type

2.3kinstalls849forks

View on GitHub

How to install next?

vercel-labs/json-render/next

$npx -y skills add vercel-labs/json-render --skill next

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# @json-render/next
2
3	Next.js renderer that converts JSON specs into full Next.js applications with routes, pages, layouts, metadata, and SSR support.
4
5	## Quick Start
6
7	```bash
8	npm install @json-render/core @json-render/react @json-render/next
9	```
10
11	### 1. Define Your Spec
12
13	```typescript
14	// lib/spec.ts
15	import type { NextAppSpec } from "@json-render/next";
16
17	export const spec: NextAppSpec = {
18	metadata: {
19	title: { default: "My App", template: "%s \| My App" },
20	description: "A json-render Next.js application",
21	},
22	layouts: {
23	main: {
24	root: "shell",
25	elements: {
26	shell: { type: "Container", props: {}, children: ["nav", "slot"] },
27	nav: { type: "NavBar", props: { links: [
28	{ href: "/", label: "Home" },
29	{ href: "/about", label: "About" },
30	]}, children: [] },
31	slot: { type: "Slot", props: {}, children: [] },
32	},
33	},
34	},
35	routes: {
36	"/": {
37	layout: "main",
38	metadata: { title: "Home" },
39	page: {
40	root: "hero",
41	elements: {
42	hero: { type: "Card", props: { title: "Welcome" }, children: [] },
43	},
44	},
45	},
46	"/about": {
47	layout: "main",
48	metadata: { title: "About" },
49	page: {
50	root: "content",
51	elements: {
52	content: { type: "Card", props: { title: "About Us" }, children: [] },
53	},
54	},
55	},
56	},
57	};
58	```
59
60	### 2. Create the App
61
62	```typescript
63	// lib/app.ts
64	import { createNextApp } from "@json-render/next/server";
65	import { spec } from "./spec";
66
67	export const { Page, generateMetadata, generateStaticParams } = createNextApp({
68	spec,
69	loaders: {
70	// Server-side data loaders (optional)
71	loadPost: async ({ slug }) => {
72	const post = await getPost(slug as string);
73	return { post };
74	},
75	},
76	});
77	```
78
79	### 3. Wire Up Route Files
80
81	```tsx
82	// app/[[...slug]]/page.tsx
83	export { Page as default, generateMetadata, generateStaticParams } from "@/lib/app";
84	```
85
86	```tsx
87	// app/[[...slug]]/layout.tsx
88	import { NextAppProvider } from "@json-render/next";
89	import { registry, handlers } from "@/lib/registry";
90
91	export default function Layout({ children }: { children: React.ReactNode }) {
92	return (
93	<html lang="en">
94	<body>
95	<NextAppProvider registry={registry} handlers={handlers}>
96	{children}
97	</NextAppProvider>
98	</body>
99	</html>
100	);
101	}
102	```
103
104	## Key Concepts
105
106	### NextAppSpec
107
108	The top-level spec defines an entire Next.js application:
109
110	- metadata: Root-level SEO metadata (title template, description, OpenGraph)
111	- layouts: Reusable layout element trees (each must include a `Slot` component)
112	- routes: Route definitions keyed by URL pattern
113	- state: Global initial state shared across all routes
114
115	### Route Patterns
116
117	Routes use Next.js URL conventions:
118
119	- `"/"` -- home page
120	- `"/about"` -- static route
121	- `"/blog/[slug]"` -- dynamic segment
122	- `"/docs/[...path]"` -- catch-all segment
123	- `"/settings/[[...path]]"` -- optional catch-all segment
124
125	### Layouts
126
127	Layouts wrap page content. Every layout MUST include a `Slot` component where page content will be rendered. Layouts are defined once in `spec.layouts` and referenced by routes via the `layout` field.
128
129	### Built-in Components
130
131	- Slot: Placeholder in layouts where page content is rendered
132	- Link: Client-side navigation link (wraps `next/link`)
133
134	### Built-in Actions
135
136	- setState: Update state value. Params: `{ statePath, value }`
137	- pushState: Append to array. Params: `{ statePath, value, clearStatePath? }`
138	- removeState: Remove from array by index. Params: `{ statePath, index }`
139	- navigate: Client-side navigation. Params: `{ href }`
140
141	### Data Loaders
142
143	Server-side async functions that run in the Server Component before rendering. Results are merged into the page's initial state.
144
145	```typescript
146	createNextApp({
147	spec,
148	loaders: {
149	loadPost: async ({ slug }) => {
150	const post = await db.post.findUnique({ where: { slug } });
151	return { post };
152	},
153	},
154	});
155	```
156
157	### SSR
158
159	Pages are server-rendered automatically. The `createNextApp` `Page` component is an async Server Component that:
160
161	1. Matches the route from the spec
162	2. Runs server-side data loaders
163	3. Generates metadata
164	4. Passes the resolved spec to the client renderer for hydration
165
166	### Entry Points
167
168	- `@json-render/next` -- Client components (NextAppProvider, PageRenderer, Link)
169	- `@json-render/next/server` -- Server utilities (createNextApp, matchRoute, schema)
170
171	## API Reference
172
173	### Server Exports (`@json-render/next/server`)
174
175	- `createNextApp(options)` -- Create Page, generateMetadata, generateStaticParams
176	- `schema` -- Custom schema for Next.js apps (for AI catalog generation)

People who liked this also viewed

6 picks

Type