Sanity + Next.js Frontend Example

Sanity + Next.js Frontend Example is a boilerplate template that demonstrates how to build a Next.js frontend powered by the Sanity headless CMS, using the movie dataset as sample content.

What is the Sanity + Next.js Frontend Example?

This starter repository pairs Next.js, the React-based framework from zeit (now Vercel), with Sanity's headless content platform. It provides a minimal, working frontend that pulls content from a Sanity dataset and renders it into web pages. The template expects a Sanity project seeded with the example movie dataset, and it exposes configuration in lib/sanity.js where you set project ID and dataset name. It's maintained by Sanity on GitHub (sanity-io/example-frontend-next-js) and requires Node.js version 8.0 or greater.

Key Features

This template includes the core plumbing needed to connect a Sanity dataset to Next.js pages, plus local development tooling.

• Next.js frontend — Uses the Next.js framework for server-rendered React pages, with routing and React components included.
• Sanity client configuration — A dedicated lib/sanity.js file holds project ID and dataset values, so you can point the app at any compatible Sanity project.
• Movie dataset ready — Built to display Sanity's example movie dataset, which includes movie and person content.
• Simple setup flow — Install with npm install, configure credentials, start a local dev server on localhost:3000.
• CORS instructions — Documents how to add localhost:3000 to your Sanity project's allowed origins via the management page or the sanity cors add command.
• Live demo — A deployed version of the template is available at https://example-frontend-next-js.sanity-io.now.sh so you can preview the output without installing anything.

Who is it for?

This template is for developers who want a reference implementation of a Sanity-powered Next.js frontend, without building the integration from scratch.

• Sanity beginners — Learn how to query a dataset and render the results in a React app.
• Next.js developers — Get a head start on adding headless CMS content to a server-rendered site.
• Prototyping teams — Stand up a working frontend for the movie dataset in minutes to test ideas or showcase Sanity.

What can you do with it?

• Evaluate Sanity + Next.js: Clone the repo, set your credentials, and run npm run dev to see a working frontend against the movie dataset.
• Customize the frontend: Change lib/sanity.js to point at your own Sanity dataset, then modify the React components to match your own design system.
• Reference the architecture: Use the project structure as a starting point for a production Next.js and Sanity application, including how to separate client configuration.

How does it work?

The template follows a straightforward setup: clone or download the repo, run npm install to fetch dependencies, edit lib/sanity.js to insert your Sanity project ID and dataset name, enable CORS for localhost:3000, and then start the app with npm run dev. The Next.js server will render pages that fetch content from Sanity at runtime.

FAQ

What is the movie dataset in this template?

Sanity's example movie dataset contains movie and person content types, used to demonstrate how Sanity content can be rendered in a Next.js app. The template is pre-configured for this schema, so you can run it as-is against the default dataset.

Can I use my own Sanity project with this template?

Yes. Open lib/sanity.js and replace the project ID and dataset name with values from your own Sanity project, then run the dev server. You also need to add http://localhost:3000 to your project's CORS Origins settings.

What Node.js version is required?

Node.js version 8.0 or greater is needed to install dependencies and run the project with npm. The template's documentation specifies this version as the minimum.