Next.js Sanity Template

The Next.js Sanity Template is a boilerplate for building a blog or marketing site with Next.js 13, Sanity CMS, and Tailwind CSS.

What is the Next.js Sanity Template?

This is a starter project that pairs Next.js 13's App Router with Sanity.io headless CMS. It outputs a public frontend plus an embedded Sanity Studio at /studio, with content modeled around two slug-driven sources: a frontpage and a posts list. The codebase is TypeScript and uses the next-sanity library for data fetching.

Key Features

• Next.js 13 App Router — Uses the new app directory and router.
• Sanity CMS — Content handled via Sanity, with Studio served at /studio.
• Tailwind CSS — Styling built with Tailwind.
• Slug-driven content — Frontpage is fetched with the slug "frontpage", posts list with "posts".
• Vercel-ready — Import the project on Vercel and set three plain-text environment variables.
• Environment variables — Needs NEXT_PUBLIC_SANITY_PROJECT_ID, NEXT_PUBLIC_SANITY_DATASET, and SANITY_API_READ_TOKEN.
• Local development — npm run dev starts the frontend on localhost:3000 and Studio on localhost:3000/studio; add localhost to Sanity's CORS Origins.

Who is it for?

This template is aimed at developers who want a pre-configured blog or marketing site backed by Sanity CMS. It suits JAMstack developers, agency teams, and content teams that need an editable frontpage and blog without building the Sanity integration from scratch.

Use cases

• Content marketers: manage a homepage and blog posts through Sanity Studio while Next.js renders them on the frontend.
• Agency developers: spin up client sites quickly using the Vercel deployment flow and the documented environment variables.
• Indie hackers: launch a personal blog or landing page with a structured content model and a clean Tailwind UI.

How does this template work?

1. Create a Sanity project and copy the project ID and dataset name.
2. Set the three environment variables either in Vercel or a local .env file.
3. Run npm run dev — the frontend appears at localhost:3000 and Sanity Studio at localhost:3000/studio.
4. Add http://localhost:3000 in Sanity settings → API → CORS Origins to allow local requests.

FAQ

Does this template use the App Router?

Yes, it is built on Next.js 13 with the new app directory and router.

What environment variables do I need?

You need NEXT_PUBLIC_SANITY_PROJECT_ID, NEXT_PUBLIC_SANITY_DATASET, and SANITY_API_READ_TOKEN, set as plain text variables.

Where is Sanity Studio accessible?

After starting the dev server, Sanity Studio runs at localhost:3000/studio.

How are content pages fetched?

The frontend start page is fetched with the slug "frontpage" and the posts list with the slug "posts".