Next.js App Router Integration
Relevant source files
The following files were used as context for generating this wiki page:
Introduction
This project utilizes the Next.js App Router to build a statically generated personal website integrated with Sanity.io. The integration leverages React Server Components for data fetching and provides a native authoring experience through an embedded Sanity Studio. The architecture is designed to support both highly performant static content and real-time visual editing via Next.js Draft Mode and Sanity's Presentation tool.
Sources: README.md:1-15, app/(personal)/layout.tsx:1-20
Routing Architecture
The application is structured into two primary route segments using Next.js Route Groups and Catch-all Routes. This separation allows for distinct layouts and behaviors between the public-facing website and the administrative Studio.
Route Groups and Segments
| Route Path | Type | Description |
|---|---|---|
/(personal) | Route Group | Contains the public website with a shared layout including Navigation and Footer. |
/studio/[[...index]] | Catch-all Route | Hosts the embedded Sanity Studio for content management. |
/projects/[slug] | Dynamic Route | Renders individual project detail pages. |
/[slug] | Dynamic Route | Renders generic dynamic pages based on Sanity documents. |
Sources: app/studio/[[...index]]/page.tsx:1-18, app/(personal)/projects/[slug]/page.tsx:1-15, app/(personal)/[slug]/page.tsx:1-10, sanity/lib/api.ts:31
Studio Mounting
The Sanity Studio is mounted directly within the Next.js app structure at the /studio route. It uses the NextStudio component and is configured to be force-static to ensure optimal loading of the authoring environment.
// app/studio/[[...index]]/page.tsx
export const dynamic = 'force-static'
export default function StudioPage() {
return <NextStudio config={config} />
}
Sources: app/studio/[[...index]]/page.tsx:12-20
Data Fetching and Live Content
The integration uses sanityFetch for retrieving data from the Sanity Content Lake. In production, this typically results in static generation, while SanityLive and draftMode enable real-time updates without full site rebuilds.
Server Component Data Flow
Data fetching is performed directly within asynchronous Server Components. The generateStaticParams function is utilized in dynamic routes to pre-render paths at build time.
The diagram above illustrates the flow of a request through the App Router to fetch data via GROQ queries defined in the Sanity library.
Sources: app/(personal)/page.tsx:8-15, app/(personal)/[slug]/page.tsx:30-40, app/(personal)/projects/[slug]/page.tsx:45-55
Live Preview and Visual Editing
Visual editing is enabled by checking Next.js draftMode. When enabled, the VisualEditing component is rendered, and a DraftModeToast provides a UI for exiting the preview session.
// app/(personal)/layout.tsx
{(await draftMode()).isEnabled && (
<>
<DraftModeToast action={...} />
<VisualEditing />
</>
)}
Sources: app/(personal)/layout.tsx:66-83
Metadata and SEO Integration
Next.js generateMetadata is used to dynamically create SEO tags (titles, descriptions, OpenGraph images) based on Sanity content.
Metadata Generation Flow
The metadata generation process ensures that social sharing and SEO data are always in sync with the latest content stored in the CMS.
Sources: app/(personal)/projects/[slug]/page.tsx:21-43, app/(personal)/layout.tsx:21-43
Summary of Key Components
| Component | Source File | Purpose |
|---|---|---|
IndexRoute | app/(personal)/layout.tsx | Root layout for the website; manages shared UI and live preview states. |
SanityLive | app/(personal)/layout.tsx | Enables live content revalidation without rebuilds. |
NextStudio | app/studio/[[...index]]/page.tsx | Provides the native authoring environment UI. |
sanityFetch | sanity/lib/live.ts | Custom wrapper for fetching data with support for live updates. |
Sources: app/(personal)/layout.tsx:64-85, app/studio/[[...index]]/page.tsx:19, sanity/lib/live.ts
Conclusion
The Next.js App Router integration in this project provides a robust foundation for a modern personal website. By separating the Studio and personal site via Route Groups, leveraging Server Components for data fetching, and utilizing Sanity's live editing tools, the architecture achieves a balance between developer experience, content editor needs, and end-user performance.