NextJS + Sanity Clean

This starter is a statically generated site that uses Next.js for the frontend and Sanity to handle its content. It comes with a standalone Sanity Studio that offers features like realtime collaboration, instant side-by-side content previews, and intuitive editing.

NextJS + Sanity Clean cover
Commands
frontend
├─ 📁 app
│  └─ 📁 components
│     ├─ 📄 {{.PascalCaseBlockTypeSingular}}.tsx
│     └─ 📄 BlockRenderer.tsx
└─ 📁 sanity
   └─ 📁 lib
      └─ 📄 queries.ts
studio/src/schemaTypes
├─ 📁 documents
│  └─ 📄 page.ts
├─ 📁 objects
│  ├─ 📄 {{.KebabCaseBlockTypeSingular}}.ts
│  └─ 📄 pageBuilder.tsx
└─ 📄 index.ts

Add Pagebuilder Block

Instantly scaffold a new Page Builder block across your Sanity Studio and Next.js frontend—generating a typed React component, wiring it into BlockRenderer, extending the shared GROQ pageBuilderFields and getPageQuery, creating and registering the Studio object schema, exposing it in the reusable pageBuilder array/menu, and updating the Studio index.

Variables
  • BlockTypeSingularQuestion 1
    Name your block type

    Sanity object `_type` used inside pageBuilder arrays.

    herotestimonialgalleryfeature
Goals
  • Create React component for the new BlockType
  • Register BlockType in BlockRenderer (import + mapping)
  • Add BlockType selection to pageBuilderFields (GROQ)
  • Export pageBuilderFields and reuse in getPageQuery
  • Export shared GROQ fragments if missing (linkFields, linkReference, postFields)
  • Create Sanity object schema for BlockType
  • Add BlockType to pageBuilder object (insert menu)
  • Switch Page document to the reusable pageBuilder object
  • Register BlockType object in Studio schema index
  • Ensure pageBuilder object is imported and listed in schemaTypes