New to Claude Skills? Learn how to install them →

Get Claude Skills
vercel-labs on GitHub

Next.js JSON Renderer

OfficialFree

Transform JSON specs into Next.js applications effortlessly.

by vercel-labs15.9k stars on vercel-labs/json-render
Updated Jul 8, 2026
Get this skill

Free · Opens the source repo

What Next.js JSON Renderer does

The Next.js JSON Renderer is a powerful tool designed to convert JSON specifications into fully functional Next.js applications. It streamlines the development process by allowing developers to define their application structure, including routes, layouts, and metadata, all within a JSON format. This skill is particularly useful for those working with the @json-render/next package, enabling the creation of multi-page applications that can be easily generated from JSON specs.

With the Next.js JSON Renderer, developers can define their application’s metadata, layouts, and routes in a structured manner. The NextAppSpec object serves as the blueprint for the application, allowing for the specification of SEO metadata, reusable layout components, and route definitions. This approach not only enhances productivity but also ensures consistency across the application, making it easier to manage and scale.

The skill supports server-side rendering (SSR) out of the box, which is crucial for performance and SEO. By using the createNextApp function, developers can generate a complete Next.js application that automatically handles server-side data loading and metadata generation. This feature is particularly beneficial for applications that require dynamic content, as the server can fetch data before rendering the page.

Overall, the Next.js JSON Renderer is ideal for developers looking to accelerate their Next.js application development by leveraging JSON specifications. Whether you are building a new application from scratch or enhancing an existing one, this skill provides a structured and efficient way to create complex applications with ease.

When to use it

Use this skill when you need to quickly generate Next.js applications from JSON specifications, especially for multi-page applications.

When not to use it

This skill may not be suitable for projects that require extensive customization beyond what can be defined in a JSON spec.

What you can build with it

Rapid Prototyping of Applications

Quickly generate Next.js applications from JSON specs to validate ideas and concepts.

Dynamic Content Management

Easily manage and render dynamic content by defining data loaders within your JSON specifications.

Consistent Application Structure

Ensure a consistent layout and routing structure across your Next.js applications by using a centralized JSON spec.

How to install Next.js JSON Renderer

View source

1. Install with the skills CLI

npx skills add vercel-labs/json-render/next --agent claude-code

2. Or install it manually

Download the skill folder and drop it into ~/.claude/skills/ for all projects, or .claude/skills/ to scope it to one repo. Restart Claude Code so it picks up the new skill.

Anthropic's agentic coding CLI, and the reference implementation of Agent Skills. Drop a skill folder into ~/.claude/skills and Claude Code loads it automatically whenever a task matches the skill's description. Claude Code docs

Inside SKILL.md

Written by vercel-labs

@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

npm install @json-render/core @json-render/react @json-render/next

1. Define Your Spec

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

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

// 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>
  );
}

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 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 };
    },
  },
});

SSR

Pages are server-rendered automatically. The createNextApp Page component is an async Server Component that:

  1. Matches the route from the spec
  2. Runs server-side data loaders
  3. Generates metadata
  4. Passes the resolved spec to the client renderer for hydration

Entry Points

  • @json-render/next -- Client components (NextAppProvider, PageRenderer, Link)
  • @json-render/next/server -- Server utilities (createNextApp, matchRoute, schema)

API Reference

Server Exports (@json-render/next/server)

  • createNextApp(options) -- Create Page, generateMetadata, generateStaticParams
  • schema -- Custom schema for Next.js apps (for AI catalog generation)
  • matchRoute(spec, pathname) -- Match a URL to a route spec
  • resolveMetadata(spec, route) -- Resolve metadata for a route
  • slugToPath(slug) -- Convert catch-all slug array to pathname
  • collectStaticParams(spec) -- Collect static params for all routes

Client Exports (@json-render/next)

  • NextAppProvider -- Context provider for registry and handlers
  • PageRenderer -- Renders a page spec with optional layout
  • NextErrorBoundary -- Error boundary component
  • NextLoading -- Loading state component
  • NextNotFound -- Not-found component
  • Link -- Built-in navigation component (wraps next/link)

Frequently asked questions about Next.js JSON Renderer

Similar skills

Playwright Component Testing

Test React and Vue components in isolation with Playwright.

Fluent UI Blazor

Integrate Fluent UI components in Blazor applications effortlessly.

Build MCP App

Create interactive UI widgets for MCP servers.

Web Design Reviewer

Identify and fix design issues in websites efficiently.

Markstream Install

Seamlessly integrate Markstream for Markdown rendering.

GSAP & Framer Scroll Animation

Create advanced scroll animations effortlessly.