Next.js Pages Router + Sanity Template

Built with

• Tailwind CSS
• Sanity CMS
• Jest

More info on setting up Sanity

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Inter, a custom Google Font.

Sanity Setup

You should already have a Sanity.io account

Key components

• Presentation is a plugin included with Sanity Studio to simplify displaying a front end inside an iframe with an adjacent document editor. It communicates directly with the front end instead of making round-trips to the Content Lake for faster live preview.

• Draft mode is a Next.js-specific way of enabling, checking, and disabling a global variable available during requests so that your application queries draft content. In other frameworks, you might replace this with an environment variable, cookie, or session.

Follow this guide to setup viewer tokens

Learn More

• Next.js Documentation - Learn about Next.js features and API.
• Sanity Guides - Deep dives into the many features of Sanity.
• Jest Documentation - Testing Framework
• Tailwind CSS Documentation - Utility-first CSS framework