Folder Structure

Folder structure for Sanity CMS

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.