From vercel-labs-json-render-1
Generates full Next.js applications from JSON specs including routes, layouts, SSR, and metadata. Use when working with @json-render/next or building AI-generated multi-page apps.
npx claudepluginhub joshuarweaver/cascade-content-creation-misc-1 --plugin vercel-labs-json-render-1This skill uses the workspace's default tool permissions.
Next.js renderer that converts JSON specs into full Next.js applications with routes, pages, layouts, metadata, and SSR support.
Guides Next.js Cache Components and Partial Prerendering (PPR) with cacheComponents enabled. Implements 'use cache', cacheLife(), cacheTag(), revalidateTag(), static/dynamic optimization, and cache debugging.
Guides building MCP servers enabling LLMs to interact with external services via tools. Covers best practices, TypeScript/Node (MCP SDK), Python (FastMCP).
Generates original PNG/PDF visual art via design philosophy manifestos for posters, graphics, and static designs on user request.
Next.js renderer that converts JSON specs into full Next.js applications with routes, pages, layouts, metadata, and SSR support.
npm install @json-render/core @json-render/react @json-render/next
// 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: [] },
},
},
},
},
};
// 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 };
},
},
});
// 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>
);
}
The top-level spec defines an entire Next.js application:
Slot component)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 segmentLayouts 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.
next/link){ statePath, value }{ statePath, value, clearStatePath? }{ statePath, index }{ href }Server-side async functions that run in the Server Component before rendering. Results are merged into the page's initial state.
createNextApp({
spec,
loaders: {
loadPost: async ({ slug }) => {
const post = await db.post.findUnique({ where: { slug } });
return { post };
},
},
});
Pages are server-rendered automatically. The createNextApp Page component is an async Server Component that:
@json-render/next -- Client components (NextAppProvider, PageRenderer, Link)@json-render/next/server -- Server utilities (createNextApp, matchRoute, schema)@json-render/next/server)createNextApp(options) -- Create Page, generateMetadata, generateStaticParamsschema -- Custom schema for Next.js apps (for AI catalog generation)matchRoute(spec, pathname) -- Match a URL to a route specresolveMetadata(spec, route) -- Resolve metadata for a routeslugToPath(slug) -- Convert catch-all slug array to pathnamecollectStaticParams(spec) -- Collect static params for all routes@json-render/next)NextAppProvider -- Context provider for registry and handlersPageRenderer -- Renders a page spec with optional layoutNextErrorBoundary -- Error boundary componentNextLoading -- Loading state componentNextNotFound -- Not-found componentLink -- Built-in navigation component (wraps next/link)