page-builder-blocks

To create reusable page builder blocks in a Next.js application, use this skill to scaffold a standardized 5-file structure including config, schema, fields, and React component files. It streamlines block creation and automatically updates internal registries.

The standard file structure for developing Next.js content blocks consists of five files: config.ts, schema.ts, fields.ts, component.tsx, and index.ts. This setup separates data validation, admin UI definitions, and React rendering.

You validate block data schemas in a Next.js page builder by defining Zod schemas that extend a base schema for common properties. This approach ensures structured data validation before rendering React components.

You define admin UI fields for custom content blocks by specifying field definitions within the fields.ts file. This configuration dictates how block attributes like titles and images appear in the admin interface.

Yes, you can use this block scaffolding tool without adding external dependencies since it operates with zero required dependencies. It provides built-in scripts and references to generate blocks and manage registries directly.