dynamic-zone

Scaffold a CMS dynamic zone for Next.js apps. Zero dependencies, zero config.

Requirements

• Next.js (App Router)
• An app directory in your project

Installation

npm install dynamic-zone
# or
pnpm add dynamic-zone
# or
yarn add dynamic-zone

Usage

Run from your Next.js project root:

npx dynamic-zone

Or if installed globally:

dynamic-zone

What It Creates

app/
└── cms/
    ├── components/          # Add your section components here
    └── dynamic-zone/
        └── section-renderer.tsx

Next Steps

1. Add section components to app/cms/components/ (e.g. hero.tsx, features.tsx).

2. Register them in the componentMap in section-renderer.tsx:

const componentMap: { [key: string]: ComponentMapType } = {
  hero: dynamicImport("hero"),
  features: dynamicImport("features"),
};

3. Use the renderer in your pages:

import SectionRenderer from "@/app/cms/dynamic-zone/section-renderer";

export default function Page({ page }) {
  return <SectionRenderer sections={page.sections} slug={page.slug} />;
}

The __component field from your CMS (e.g. sections.hero) is parsed to match the component key (hero → hero).

CLI Options

| Flag | Description | | --------------- | ------------ | | -h, --help | Show help | | -v, --version | Show version |

License

ISC