Introduction & Features
Relevant source files
The following files were used as context for generating this wiki page:
This project is a high-performance personal website starter built using Next.js for the frontend and Sanity for content management. It provides a "native authoring experience," meaning the content management interface (Sanity Studio) is embedded directly within the Next.js application at the /studio route. This architecture allows for real-time collaboration, visual editing, and instant content previews without requiring full site rebuilds.
Sources: README.md:3-9, app/studio/[[...index]]/page.tsx:18-20
The system leverages Sanity Content Lake for hosted content APIs and features a flexible schema including projects, pages, and timelines. It is optimized for speed using Next.js App Router and static generation, while maintaining dynamic capabilities through Sanity Live Revalidation and Draft Mode.
Sources: README.md:11-20, app/(personal)/layout.tsx:75-80
Key Features
The platform is designed to provide developers and content creators with a seamless workflow.
| Feature | Description |
|---|---|
| Native Sanity Studio | An embedded authoring environment at /studio for managing content. |
| Visual Editing | Side-by-side content previewing with "live updates" using the Presentation tool. |
| Live Revalidation | Content updates appear instantly without manual rebuilds. |
| Structured Content | Support for block content, custom fields, and document singletons (Home, Settings). |
| Draft Mode | Preview unpublished content changes securely. |
Sources: README.md:13-22, sanity.config.ts:50-53
System Architecture
The project follows a decoupled architecture where the frontend (Next.js) consumes content from the Sanity Content Lake. However, the management interface is co-located within the Next.js deployment.
Content Flow and Integration
The following diagram illustrates how data flows from the Sanity Content Lake to the Next.js frontend and how the Studio interacts with the project.
Technical Configuration
The core configuration resides in sanity.config.ts, which defines the project identity, dataset, and the plugins used to enhance the Studio experience.
export default defineConfig({
basePath: studioUrl,
projectId: projectId || '',
dataset: dataset || '',
title,
schema: {
types: [
home,
settings,
duration,
page,
project,
milestone,
timeline,
],
},
plugins: [
structureTool({
structure: pageStructure([home, settings]),
}),
presentationTool({
resolve,
previewUrl: {previewMode: {enable: '/api/draft-mode/enable'}},
}),
singletonPlugin([home.name, settings.name]),
visionTool({defaultApiVersion: apiVersion}),
],
})
Sources: sanity.config.ts:27-66
Content Modeling
The system uses a mix of "Documents" (multiple instances), "Singletons" (one instance), and "Objects" (reusable structures).
Document Types and Singletons
- Home (Singleton): Manages the landing page title, overview text, and selected showcase projects.
- Settings (Singleton): Configures global elements like navigation menu items and footer content.
- Project (Document): Detailed records for portfolio items including client info, site URLs, and tags.
- Page (Document): Generic pages with title, slug, and a flexible body.
Sources: sanity/schemas/singletons/home.ts:4-72, sanity/schemas/documents/project.ts:4-142, sanity/schemas/documents/page.ts:4-106
Data Schema Relationships
The relationship between showcase projects on the home page and the project documents is handled via references.
Visual Editing & Presentation
The project utilizes the presentationTool to provide an interactive editing experience. When users edit content in the Studio, the frontend updates in real-time.
- Resolver API: Located in
sanity/plugins/resolve.ts, it maps Sanity documents to specific frontend routes (e.g.,_type == "project"maps to/projects/:slug). - Stega Encoding: The
sanity/lib/client.tsenables "stega," which embeds invisible metadata into the content strings. This allows the Visual Editing overlay to know exactly which field in Sanity corresponds to which element on the screen. - Draft Mode: Next.js Draft Mode is toggled via
/api/draft-mode/enable/route.tsto allow viewing of unpublished content.
Sources: sanity/plugins/resolve.ts:10-20, sanity/lib/client.ts:10-22, README.md:16-17
Development Workflow
The project includes an IntroTemplate component that appears only during development (on localhost) or until removed, guiding the user through the initial setup steps.
- Step 1: Create a schema in
sanity.config.ts. - Step 2: Create content in the local Studio.
- Step 3: Deploy to Vercel or Netlify.
Sources: intro-template/index.tsx:32-130, README.md:46-54
Environment Requirements
Successful deployment and local development require the following variables:
NEXT_PUBLIC_SANITY_PROJECT_IDNEXT_PUBLIC_SANITY_DATASETNEXT_PUBLIC_SANITY_API_VERSION
Sources: sanity/lib/api.ts:7-17, netlify.toml:5-9
Summary
The sanity-next-js-personal-website project provides a robust architecture for modern personal websites. By integrating Sanity Studio directly into a Next.js App Router environment, it bridges the gap between static performance and dynamic content management. Its primary strength lies in its "Visual Editing" capabilities and a flexible schema that supports complex data types like timelines and milestones while remaining developer-friendly through TypeScript and Tailwind CSS.