Tech Stack Overview
Relevant source files
The following files were used as context for generating this wiki page:
The project is a performant, statically generated personal website built with a modern web architecture. It leverages Next.js for the frontend framework and Sanity.io as a headless Content Management System (CMS). The primary goal is to provide a seamless authoring experience through a native, embedded Sanity Studio while maintaining high performance for end-users via static generation and live revalidation.
Sources: README.md:5-15, package.json:26-34
Core Technologies
The application utilizes a specialized set of libraries to bridge the gap between content management and frontend presentation.
| Category | Technology | Description |
|---|---|---|
| Frontend Framework | Next.js 16.1.6 | Provides the App Router, static site generation, and server-side rendering. |
| Content Management | Sanity 5.8.1 | Headless CMS for structured content and native authoring interface. |
| Styling | Tailwind CSS 3.4.19 | Utility-first CSS framework for layout and design. |
| Data Fetching | next-sanity 12.0.17 | Official toolkit for integrating Sanity with Next.js, including Visual Editing support. |
| Type Safety | TypeScript 5.9.3 | Static typing for both frontend components and CMS schemas. |
Sources: package.json:26-64, README.md:15-20
Architecture and Data Flow
The project follows a decoupled architecture where the frontend (Next.js) consumes data from the Sanity Content Lake.
High-Level Architecture
The diagram below illustrates the relationship between the Next.js application, the Sanity Studio (embedded within the app), and the Sanity Content Lake.
The application integrates the authoring environment directly into the website under the /studio route using a catch-all route.
Sources: README.md:52-60, app/studio/[[...index]]/page.tsx:16-25, sanity.config.ts:7-10
Content Retrieval Flow
Content is retrieved using GROQ (Graph-Relational Object Queries) and rendered via Server Components. The sanityFetch utility handles data fetching with support for draft mode and live revalidation.
Content Management System (Sanity)
Studio Configuration
The Sanity Studio is configured via sanity.config.ts. It defines the project identity, datasets, and the schema types available for editing. Key plugins include structureTool for organizing the sidebar and presentationTool for visual editing.
export default defineConfig({
basePath: studioUrl,
projectId: projectId || '',
dataset: dataset || '',
schema: {
types: [home, settings, duration, page, project, milestone, timeline],
},
plugins: [
structureTool({ structure: pageStructure([home, settings]) }),
presentationTool({
resolve,
previewUrl: { previewMode: { enable: '/api/draft-mode/enable' } },
}),
visionTool({ defaultApiVersion: apiVersion }),
],
})
Sources: sanity.config.ts:22-60
Data Models (Schemas)
The system uses "Singletons" for unique pages (Home, Settings) and "Documents" for repeatable content (Projects, Pages).
- Singletons:
home,settings - Documents:
project,page - Objects:
milestone,timeline,duration
Sources: sanity.config.ts:30-44, sanity/schemas/singletons/home.ts:4-10
Environment and API Configuration
The application requires specific environment variables to communicate with Sanity. These are asserted at runtime to ensure the client is properly initialized.
| Variable | Description | Source |
|---|---|---|
NEXT_PUBLIC_SANITY_PROJECT_ID | The unique ID for the Sanity project. | sanity/lib/api.ts |
NEXT_PUBLIC_SANITY_DATASET | The production dataset (e.g., 'production'). | sanity/lib/api.ts |
NEXT_PUBLIC_SANITY_API_VERSION | The version of the Sanity API to use. | sanity/lib/api.ts |
Sources: sanity/lib/api.ts:7-22, netlify.toml:5-10
Visual Editing and Live Previews
The stack includes next-sanity/visual-editing, allowing editors to see changes in real-time. This is achieved through "Stega" (Content Source Maps), which embed metadata into the content strings returned by the API, enabling the frontend to link specific UI elements back to their source in the Sanity Studio.
Sources: sanity/lib/client.ts:8-23, app/(personal)/layout.tsx:78-95
Conclusion
This tech stack combines the performance of a static Next.js site with the flexibility of a headless CMS. By embedding Sanity Studio directly into the application and utilizing visual editing tools, the project provides a unified environment for both development and content creation.
Sources: README.md:1-20