Use Sanity with Next.js

Integrate Sanity with your Next.js app

Leverage the power of Next.js to serve your Sanity content.

A browser displaying a Sanity + Next.js website preview on the left and its Sanity Studio settings editor on the right.
The basics

Start here

Discover the different ways to integrate Next.js and Sanity

Next.js Quick start

New to Sanity and Next.js? Follow these step by step instructions to set up your site and studio.

Work-ready Next.js

Build a functional, content-driven and dynamic web application that best serves your end-users, fellow developers and content authors.

Visual Editing with Next.js App Router

Set up visual editing between Sanity Studio and a Next.js App Router frontend, including the Sanity client, Draft Mode, Visual Editing, and Live Content.

Configuration

Configure the next-sanity client

Reference for Sanity client configuration in Next.js. Covers base config, environment setup, useCdn, feature layers, token handling, and per-request overrides.

Embedding Sanity Studio in Next.js

Mount Sanity Studio as a route in your Next.js application using NextStudio. Covers auto and manual installation, App Router catch-all route, metadata, and route separation.

Query content

Querying content in Next.js

Use the next-sanity library to write typed GROQ queries with defineQuery and fetch content in App Router or Pages Router.