next - Claude Code Skill (2.4k installs)

Name: Next
Author: vercel-labs

vercel-labs/json-render

2.4k installs
15.8k repo stars
Updated July 8, 2026
vercel-labs/json-render

A Next.js renderer library that parses JSON application specs and generates full Next.js applications with automatic route handling, layout composition, and server-side rendering.

About

@json-render/next is a Next.js renderer that transforms JSON specs into complete multi-page Next.js applications with automatic route handling, layout composition, SSR, and metadata generation. Developers use it when building AI-generated applications, creating multi-page sites from structured data, or implementing spec-driven development patterns. Key workflows include defining specs with layouts and routes, configuring server-side data loaders for async content, and wiring up catch-all route files that leverage generateMetadata and generateStaticParams for SEO and static optimization.

Converts JSON specs to full Next.js apps with routes, layouts, and SSR automatically
Server-side data loaders for async content fetching before rendering
Built-in components (Slot, Link) and actions (setState, navigate, pushState) for interactivity
Supports dynamic routes (/blog/[slug]), catch-all segments, and optional catch-all patterns
Generates metadata and static params automatically via createNextApp utilities

Next by the numbers

2,417 all-time installs (skills.sh)
+365 installs in the week ending Jul 28, 2026 (Skillselion tracking)
Ranked #201 of 2,277 Frontend Development skills by installs in the Skillselion catalog
Security screen: LOW risk (skills.sh audit)
Data as of Jul 28, 2026 (Skillselion catalog sync)

At a glance

next capabilities & compatibility

Capabilities: json spec to next.js app code generation · automatic route matching and page resolution · server side data loading and state merging · metadata generation and static param collection · layout composition with slot based rendering · client side navigation and state mutations
Use cases: frontend · api development
Platforms: macOS · Windows · Linux
Runs: Runs locally
Pricing: Free

From the docs

What next says it does

Next.js renderer that converts JSON specs into full Next.js applications with routes, pages, layouts, metadata, and SSR support.

SKILL.md

npx skills add https://github.com/vercel-labs/json-render --skill next

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

[![Listed on Skillselion](https://skillselion.com/badge/skills/vercel-labs/json-render/next.svg)](https://skillselion.com/skills/vercel-labs/json-render/next)

Installs	2.4k
repo stars	★ 15.8k
Security audit	3 / 3 scanners passed
Last updated	July 8, 2026
Repository	vercel-labs/json-render ↗

What it does

Convert JSON specifications into full Next.js applications with routes, layouts, server-side rendering, and metadata.

Who is it for?

Teams building spec-driven Next.js applications, AI-generated multi-page sites, or rapid prototyping of Next.js apps from structured data.

Skip if: Single-page applications, static site generators without server rendering requirements, or teams preferring traditional file-based routing.

When should I use this skill?

You need to render a JSON application spec as a full Next.js app with multiple routes, layouts, and server-side data loading.

What you get

Developers can define applications entirely in JSON (metadata, layouts, routes) and have Next.js Page components, routing, SSR, and SEO metadata generated automatically.

NextAppSpec (JSON type definition)
Page component
generateMetadata function

By the numbers

Supports dynamic segments, catch-all, and optional catch-all route patterns
Built-in 2 core components (Slot, Link) and 4 built-in actions (setState, pushState, removeState, navigate)

Files

SKILL.mdMarkdownGitHub ↗

@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)

Related skills

Vercel React Best PracticesAutomatically apply Vercel’s official React and Next.js performance rules during code generation and review.576k29.4k

Vercel Composition PatternsGenerate and refactor React components that stay maintainable as complexity grows without boolean prop explosion.261k29.4k

ShadcnAdd, compose, search, fix, and style production-grade React components directly from source without leaving their editor.249k120k

Develop UserscriptsCorrectly write, debug, and package userscripts for Tampermonkey and ScriptCat with proper metadata, GM APIs, and runtime decisions.224k72

Minimalist UiGenerate clean, editorial-style web interfaces with warm monochrome palettes, typographic hierarchy, bento grids and flat components that feel premium and utilita201k66.9k

Vercel React Native SkillsEnsure AI agents generate and refactor React Native code that follows performance best practices without common rendering and list pitfalls.173k29.4k

FAQ

Do I have to manually create route files for every path?

No. Use a catch-all route file (app/[[...slug]]/page.tsx) that exports the Page component from createNextApp; routing is handled by matchRoute against your spec.

How do I fetch server-side data for dynamic routes?

Define async data loaders in the loaders object passed to createNextApp, keyed by loader name. Results are merged into page initial state before rendering.

What components and actions are built in?

Built-in: Slot (layout placeholder), Link (next/link wrapper). Built-in actions: setState, pushState, removeState (state mutations), navigate (client-side routing).

Is Next safe to install?

skills.sh reports 3 of 3 security scanners passed. Review the Security Audits panel on this page before installing in production.

Frontend Developmentfrontendintegrations