Build a stunning, content-driven website

This template uses Next.js for the frontend and Sanity to handle its content. It comes with a native Sanity Studio that offers features like real-time collaboration and visual editing with live updates using Presentation.

The Studio connects to Sanity Content Lake, which gives you hosted content APIs with a flexible query language, on-demand image transformations, powerful patching, and more. You can use this starter to kick-start a content-driven website or learn more about these technologies.

Features

• A performant, content-driven website with editable pages
• A native and customizable authoring environment
• Real-time and collaborative content editing with fine-grained revision history
• Side-by-side instant content preview that works across your whole site
• Support for block content and the most advanced custom fields capability in the industry
• Webhook-triggered Incremental Static Revalidation; no need to wait for a rebuild to publish new content
• Free Sanity project with unlimited admin users, free content updates, and pay-as-you-go for API overages
• A project with starter-friendly and not too heavy-handed TypeScript and Tailwind.css

Table of Contents

• Features
• Table of Contents
• Project Overview
  • Important files and folders
• Configuration
  • Step 1. Set up the environment
  • Step 2. Set up the project locally
  • Step 3. Run Next.js locally in development mode
  • Step 4. Deploy to production
• Portable Text
  • Using the Custom Portable Text Component
• Adding Custom Components

Project Overview

Important files and folders

File(s)	Description
sanity.config.ts	Config file for Sanity Studio
sanity.cli.ts	Config file for Sanity CLI
/app/studio/[[...tool]]/Studio.tsx	Where Sanity Studio is mounted
/app/api/revalidate/route.ts	Serverless route for triggering ISR
/app/api/draft/route.ts	Serverless route for triggering Draft mode
/sanity/schemaTypes	Where Sanity Studio gets its content types from
/sanity/plugins	Where the advanced Sanity Studio customization is setup
/sanity/loader/loadQuery.ts,/sanity/loader/useQuery.ts	Configuration for the Sanity Content Lake client
/components/custom-portable-text.tsx	Component for rendering your custom React components

Configuration

Step 1. Set up the environment

Use the Deploy Button below. It will let you deploy the starter using Vercel as well as connect it to your Sanity Content Lake using the Sanity Vercel Integration.

Step 2. Set up the project locally

Clone the repository that was created for you on your GitHub account. Once cloned, run the following command from the project's root directory:

npx vercel link

Download the environment variables needed to connect Next.js and the Studio to your Sanity project:

npx vercel env pull

Step 3. Run Next.js locally in development mode

npm install && npm run dev

When you run this development server, the changes you make in your frontend and studio configuration will be applied live using hot reloading.

Your content-driven website should be up and running on http://localhost:3000! You can create and edit content on http://localhost:3000/studio.

Step 4. Deploy to production

To deploy your changes to production you use git:

git add .
git commit
git push

Alternatively, you can deploy without a git hosting provider using the Vercel CLI:

npx vercel --prod

Portable Text

We believe you should treat all your content as structured content, even your rich text and block content. Portable Text is a presentation-agnostic specification for block content that you can use with Sanity. It's designed to be efficient for real-time collaborative interfaces and makes it possible to annotate rich text with additional data structures recursively.

When you query your Sanity project’s API your rich text content is returned as Portable Text. If you are accustomed to traditional or other headless CMSes you are probably used to dealing with HTML or Markdown out of the box. Portable Text is designed to be used in pretty much any format or markup where you want to render rich text content.

You render Portable Text by serializing the arrays that contain your content into the format you need it. There is tooling for generic markup and programming languages and for popular frameworks, that makes it easier to serialize Portable Text and lets you decide how custom content types should be handled.

Learn More about Portable Text.

Using the Custom Portable Text Component

In the /components/custom-portable-text.tsx file of our project you will see a types object. This is an object of React components that renders different types of objects that might appear both as part of the input array, or as inline objects within text blocks - eg alongside text spans.

Learn More about types.

Adding Custom Components

Step 1. Use v0.dev to help design a component

Step 2. Create a schema for your new component in the sanity/schemas/objects folder

Step 3. Add the schema to the sanity/schemas/objects/custom-components.ts file

Step 4. Create a new component in the /components/sanity folder

Step 5. Automatically create types for your new schema

npm run typegen

Step 6. Update the <CustomPortableText /> component in components/custom-portable-text.tsx to include your new component

Step 7. Go to the /studio route in your project to create and publish your content