Project Directory Structure

Relevant source files

The following files were used as context for generating this wiki page:

• README.md
• sanity.config.ts
• app/studio/[[...index]]/page.tsx
• sanity/lib/api.ts
• sanity/lib/client.ts
• app/(personal)/layout.tsx
• sanity/schemas/documents/project.ts
• package.json

The sanity-next-js-personal-website project is a modern web application built with Next.js and Sanity.io. It follows a structured approach to separate the frontend concerns (Next.js App Router) from the content management and schema definitions (Sanity Studio). The project is designed to be statically generated while providing a native authoring experience through an embedded Sanity Studio.

Sources: README.md:1-15, package.json:34-45

Core Directory Architecture

The repository is organized into two primary functional areas: the app directory for Next.js routing and UI components, and the sanity directory for content modeling and configuration.

The diagram above illustrates the high-level organization of the codebase, highlighting the separation between the Next.js application logic and the Sanity CMS integration.

Sources: README.md:46-55, sanity.config.ts:10-20

The /app Directory (Next.js)

The /app directory utilizes the Next.js App Router. It is divided into logical segments using route groups and catch-all routes.

(personal) Route Group

This directory contains the main website frontend. It includes the root layout and pages for projects and custom content.

• Layout: Defined in app/(personal)/layout.tsx, it manages the global site structure, including the Navbar, Footer, and Sanity Live Revalidation components.
• Dynamic Routes: Uses [slug] patterns for rendering specific projects and pages dynamically based on Sanity data.

studio Route

The route /app/studio/[[...index]]/page.tsx acts as a catch-all for the Sanity Studio. It mounts the NextStudio component, allowing the CMS to be hosted within the same application at the /studio URL.

Sources: app/(personal)/layout.tsx:43-85, app/studio/[[...index]]/page.tsx:1-22, sanity/lib/api.ts:37

The /sanity Directory (CMS Logic)

This directory contains the logic for the Sanity Content Lake integration and the Studio customization.

Folder/File	Description
sanity/schemas	Contains the content type definitions (Documents, Objects, and Singletons).
sanity/lib	Configuration for the Sanity client, API versioning, and GROQ queries.
sanity/plugins	Advanced Studio customizations, such as singleton handling and link resolution.
sanity.config.ts	The primary configuration file for Sanity Studio.

Sources: README.md:46-55, sanity.config.ts:1-20

Content Modeling (Schemas)

Schemas are categorized to differentiate between standalone documents and reusable objects:

• Documents: Defines primary content types like project and page.
• Singletons: Specialized documents like home or settings where only one instance exists.
• Objects: Reusable data structures like duration, milestone, and timeline.

Sources: sanity.config.ts:31-43, sanity/schemas/documents/project.ts:4-10

Data Flow and Integration

The application uses next-sanity to bridge the gap between the Sanity Content Lake and the Next.js frontend.

The sequence diagram shows how content flows from the Studio to the Content Lake and is subsequently fetched by the Next.js frontend using GROQ queries.

Sources: README.md:10-25, sanity/lib/client.ts:4-15, sanity/lib/queries.ts:1-10

Key Configuration Files

The project relies on several root-level and subdirectory configuration files to manage the build and runtime environment.

• sanity.config.ts: Configures the Studio's project ID, dataset, schema types, and plugins (e.g., visionTool, presentationTool).
• package.json: Defines dependencies such as next, sanity, and next-sanity, along with scripts for typegen (generating TypeScript types from Sanity schemas).
• sanity.lib.api.ts: Centralizes environment variable management for Sanity integration, ensuring NEXT_PUBLIC_SANITY_PROJECT_ID and NEXT_PUBLIC_SANITY_DATASET are defined.

Sources: sanity.config.ts:22-64, package.json:7-20, sanity/lib/api.ts:7-25

Summary

The project directory structure is optimized for a seamless developer and authoring experience. By embedding Sanity Studio directly into the Next.js /studio route and utilizing a shared schema/library directory, the project ensures that content modeling and frontend development remain tightly integrated while maintaining clear architectural boundaries. This structure supports features like real-time visual editing and static site generation with live revalidation.

Sources: README.md:5-20, app/studio/[[...index]]/page.tsx:15-22