Next
Ship multi-page Next.js apps from JSON specs with routes, layouts, SSR, and metadata when using @json-render/next or AI-generated app structures.
Overview
next is an agent skill for the Build phase that turns @json-render/next JSON specs into full Next.js applications with routes, layouts, SSR, and metadata.
Install
npx skills add https://github.com/vercel-labs/json-render --skill nextWhat is this skill?
- Maps NextAppSpec JSON to routes, nested layouts, and page element trees
- Supports SSR and Next.js metadata (title templates, per-route SEO)
- Integrates @json-render/core and @json-render/react with @json-render/next
- Defines reusable layout shells with NavBar, Container, and Slot patterns
- Quick-start install path for npm packages across lib/spec and app structure
Adoption & trust: 455 installs on skills.sh; 15k GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You have a JSON app spec from an agent or generator but no clear path to a real Next.js multi-page app with layouts and metadata.
Who is it for?
Solo builders using json-render or AI output to bootstrap Next.js multi-route apps without manually duplicating layout boilerplate.
Skip if: Teams that only need a single static page with no JSON spec pipeline, or projects not using Next.js at all.
When should I use this skill?
When working with @json-render/next, building Next.js apps from JSON specs, or creating AI-generated multi-page applications.
What do I get? / Deliverables
You get a spec-driven Next.js structure with defined layouts, routes, and metadata hooks ready to extend with custom components and deploy.
- Next.js route and layout structure from spec
- Metadata configuration per route
- Package install and spec definition patterns
Recommended Skills
Journey fit
How it compares
Use for JSON-to-Next rendering instead of hand-coding every route from scratch or generic create-next-app tutorials alone.
Common Questions / FAQ
Who is next for?
Indie developers and agent users working with @json-render/next who need routes, layouts, and metadata from a JSON NextAppSpec.
When should I use next?
During build when you are implementing or reviewing AI-generated or spec-driven Next.js apps, adding routes, or wiring json-render packages.
Is next safe to install?
Treat it as documentation-style guidance; review the Security Audits panel on this Prism page and vet the underlying npm packages before production use.
SKILL.md
READMESKILL.md - Next
# @json-render/next Next.js renderer that converts JSON specs into full Next.js applications with routes, pages, layouts, metadata, and SSR support. ## Quick Start ```bash npm install @json-render/core @json-render/react @json-render/next ``` ### 1. Define Your Spec ```typescript // lib/spec.ts import type { NextAppSpec } from "@json-render/next"; export const spec: NextAppSpec = { metadata: { title: { default: "My App", template: "%s | My App" }, description: "A json-render Next.js application", }, layouts: { main: { root: "shell", elements: { shell: { type: "Container", props: {}, children: ["nav", "slot"] }, nav: { type: "NavBar", props: { links: [ { href: "/", label: "Home" }, { href: "/about", label: "About" }, ]}, 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 Us" }, children: [] }, }, }, }, }, }; ``` ### 2. Create the App ```typescript // lib/app.ts import { createNextApp } from "@json-render/next/server"; import { spec } from "./spec"; export const { Page, generateMetadata, generateStaticParams } = createNextApp({ spec, loaders: { // Server-side data loaders (optional) loadPost: async ({ slug }) => { const post = await getPost(slug as string); return { post }; }, }, }); ``` ### 3. Wire Up Route Files ```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> ); } ``` ## Key Concepts ### NextAppSpec The top-level spec defines an entire Next.js application: - **metadata**: Root-level SEO metadata (title template, description, OpenGraph) - **layouts**: Reusable layout element trees (each must include a `Slot` component) - **routes**: Route definitions keyed by URL pattern - **state**: Global initial state shared across all routes ### Route Patterns Routes use Next.js URL conventions: - `"/"` -- home page - `"/about"` -- static route - `"/blog/[slug]"` -- dynamic segment - `"/docs/[...path]"` -- catch-all segment - `"/settings/[[...path]]"` -- optional catch-all segment ### Layouts 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. ### Built-in Components - **Slot**: Placeholder in layouts where page content is rendered - **Link**: Client-side navigation link (wraps `next/link`) ### Built-in Actions - **setState**: Update state value. Params: `{ statePath, value }` - **pushState**: Append to array. Params: `{ statePath, value, clearStatePath? }` - **removeState**: Remove from array by index. Params: `{ statePath, index }` - **navigate**: Client-side navigation. Params: `{ href }` ### Data Loaders Server-side a