Next.js + Sanity Architecture Notes

Next.js + Sanity architecture

High-level structure for a fast, resilient content platform.

Core pieces

1. Next.js App Router
2. Sanity Content Lake + GROQ
3. ISR for public pages
4. Edge image delivery via Cloudinary

Separate authoring concerns from presentation. Treat Sanity as the source of truth.

Data flow

• Author content in Sanity
• Fetch via GROQ
• Transform to MDX or HTML
• Cache with ISR and revalidate on webhooks

GROQ example

*[_type == "post" && slug.current == $slug][0]{
	_title,
	"slug": slug.current,
	publishedAt,
	tags[]->title,
	category->title,
	coverImage,
	excerpt,
	body
}

Next.js fetch helper

import { createClient } from 'next-sanity';

export const client = createClient({
	projectId: [process.env.NEXT](<http://process.env.NEXT>)_PUBLIC_SANITY_PROJECT_ID!,
	dataset: [process.env.NEXT](<http://process.env.NEXT>)_PUBLIC_SANITY_DATASET!,
	apiVersion: '2025-01-01',
	useCdn: true,
});

Open questions

• MDX vs serialized HTML rendering
• Where to place portable text components