Folder Structure

This guide provides an overview of the folder structure typically used when working with a Sanity CMS project integrated with Next.js. The structure is designed to keep your code organized and modular, making it easier to maintain and extend.

hero-1.tsx

index.tsx

page.ts

section-header.ts

structure.ts

env.ts

schema.ts

package.json

schema.json

sanity.types.ts

sanity.cli.ts

sanity.config.ts

Explanation of the Folder Structure

app/: This folder contains the main application files for Next.js, such as layout.tsx and page.tsx, which define the overall layout and root page of the application.
components/: Houses reusable UI components. It is further divided into:
- blocks/: A subfolder for individual UI components like hero.tsx, heading.tsx, and features.tsx that are used throughout the site.
- index.tsx: A component used to dynamically render pages based on content from the CMS.
sanity/: Contains files and folders related to the Sanity CMS integration.
- lib/: Includes utility files for handling CMS-related operations, such as client configuration (client.ts), data fetching (live.ts, fetch.ts, metadata.ts), and token management (token.ts).
- presentation/: Contains components or utilities specific to presenting data fetched from Sanity, such as resolve.ts.
- queries/: This folder holds GraphQL or GROQ queries that retrieve data from the CMS. The queries are organized into different files like index.ts, page.ts, and post.ts.
- schemas/: Defines the data structure for your CMS content.
  - blocks/: A subfolder for page-builder-specific schemas, such as hero.ts, feature.ts, and cta.ts.
  - documents/: Contains schemas for document types like page.ts, post.ts, and author.ts.
- structure.ts: Configures the layout and navigation of content types in Sanity Studio using the Structure Builder, enhancing the content editing experience.
- env.ts: Environment-specific configurations.
- schema.ts: The primary schema configuration file that imports and combines individual schema definitions.
package.json: The package manifest file for the project, specifying dependencies, scripts, and project metadata.
schema.json: The schema configuration file that is generated with the sanity schema export command.
sanity.types.ts: The types for the Sanity CMS generated with the sanity schema export command.
sanity.cli.ts: The CLI configuration file for the Sanity CMS.
sanity.config.ts: The configuration file for the Sanity CMS.