next

Converts JSON specifications into Next.js apps with routes, layouts, SSR, and metadata.

Updated Aug 23, 2026
One-click install
npx skills add https://github.com/WannaCry081/React-Workflow-Starter --skill next-wannacry081
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: next
Source: https://github.com/WannaCry081/React-Workflow-Starter/tree/main/.agents/skills/next
Command: npx skills add https://github.com/WannaCry081/React-Workflow-Starter --skill next-wannacry081

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

JSON specifications can describe complex UIs and routes, and this Skill provides a Next.js renderer that converts those specs into fully functional Next.js applications with routes, layouts, SSR, and metadata.

Core Features & Use Cases

  • Metadata-driven route and layout generation from a single spec
  • SSR-enabled page rendering, dynamic routing, and layout composition
  • Use cases include prototyping multi-page apps from JSON specs or generating production-ready Next.js apps from structured definitions

Quick Start

Define your spec in lib/spec.ts, implement the app with createNextApp in lib/app.ts, and wire route files under app/[[...slug]] to render pages.

Frequently Asked Questions about next

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I turn JSON specs into a Next.js app with routes and SSR?

To turn JSON specs into a Next.js app, define your specifications in lib/spec.ts and use the renderer to generate fully functional applications with routes, layouts, and server-side rendering. This approach enables metadata-driven multi-page app prototyping from structured definitions.

What is metadata-driven route generation in Next.js?

Metadata-driven route generation is the process of using a JSON specification to automatically map and compose Next.js routes and layouts. Instead of manually creating individual page files, you define the structure in a spec and the renderer wires the dynamic routing under app/[[...slug]].

How do I generate dynamic routes from JSON for a multi-page Next.js application?

You can generate dynamic routes from JSON by defining your multi-page app structure in a single spec file. The Next.js renderer maps this structured definition and wires route files under app/[[...slug]] to automatically handle dynamic routing and page rendering.

Can I use JSON specifications to compose layouts and metadata in Next.js?

Yes, you can use JSON specifications to compose layouts and generate metadata in Next.js. The spec-driven API translates your structured definitions into layout composition and integrates server-side rendering, enabling production-ready apps from a single metadata source.

Do I need to manually configure server-side rendering when generating Next.js apps from JSON?

No, manual server-side rendering configuration is not required when generating Next.js apps from JSON. The spec-driven renderer automatically handles SSR-enabled page rendering and dynamic routing as part of the application generation process from your structured definitions.

What is the best way to prototype multi-page Next.js apps from structured definitions?

The best way to prototype multi-page Next.js apps from structured definitions is using a spec-driven API that converts JSON specifications into production-ready applications. Define your spec in lib/spec.ts, implement with createNextApp, and let the renderer handle routes and SSR automatically.