Next.js + Sanity: A Powerful Website Starter with Real-time Visual Editing

the website this template generates Visual Editing using Sanity's Presentation Tool

This starter is a statically generated website and blog built with Next.js 15 (App Router) for the frontend and powered by Sanity for content management. It includes a standalone Sanity Studio, providing features like real-time collaboration, visual editing, and live updates through its Presentation mode.

The Studio integrates with Sanity's Content Lake, offering hosted content APIs with a flexible query language, on-demand image transformations, advanced patching, and more. These capabilities seamlessly connect to your frontend via Sanity’s Live Content API, enabling live, dynamic updates without requiring page reloads. Whether you're launching a blog, building a website, or exploring new technologies, this starter gives you a solid foundation to get started.

Features

• Next.js 15, Fast and Performant: Static site built with Next.js App Router for excellent speed and SEO.
• Real-time Visual Editing: Use Sanity's Presentation tools to see live updates as you edit.
• Live Content: The Live Content API allows you to deliver live, dynamic experiences to your users without the complexity and scalability challenges that typically come with building real-time functionality.
• Customizable Pages: Create and manage pages using a page builder with dynamic components.
• Powerful Content Management: Collaborate with team members in real-time, with fine-grained revision history.
• AI-powered Media Support: Auto-generate alt texts with Sanity AI Assist.
• On-demand Publishing: No waiting for rebuilds—new content is live instantly with Incremental Static Revalidation.
• Easy Media Management: Integrated Unsplash support for seamless media handling.

Demo

🌐 https://sanity-template-nextjs-clean-preview.sanity.dev/

Get Started Quickly

The easiest way to start is by deploying your app to Vercel with the button below. This will:

• Clone the repo to your GitHub account.
• Link or set up a Sanity project.
• Deploy your Next.js app on Vercel.

🚀 1. Deploy to Vercel

Click the button to begin the setup wizard for your Next.js and Sanity project.

Note: Prefer manual installation? See manual-installation.md.

---

🛠 2. Deploy Sanity Studio

1. Clone your repository:

   git clone <your-repo-url>
   cd studio

2. Initialize Sanity Studio:

   npx sanity init --env

   This will generate a .env file in the studio directory.

3. Configure environment variables: In the generated .env file, add the following:

   SANITY_STUDIO_PREVIEW_URL="<your-vercel-app-url>"

   Replace <your-vercel-app-url> with the URL of your Vercel hosted Next.js app.

4. Import Demo Data (optional):

   If you want to start with some sample content, you can import the provided dataset (demoData.tar.gz) into your Sanity project. This step is optional but can be helpful for getting started quickly.

   To import the dataset, run the following command in your terminal:

   npx sanity dataset import demoData.tar.gz production

5. Deploy your Studio:

   npx sanity deploy

   You'll be prompted to set a URL for your deployed Sanity Studio (e.g., https://your-project-name.sanity.studio). Take note of this URL as you'll need it in the next step.

---

🔧 3. Configure Next.js with Sanity Studio URL

1. Go to Vercel Dashboard > Settings > Environment Variables.
2. Add:
   • Name: NEXT_PUBLIC_SANITY_STUDIO_URL
   • Value: Your Sanity Studio's URL (e.g., https://your-project.sanity.studio).
3. Redeploy your Next.js app to apply changes.

---

Running Locally

When developing your app, you'll run the files locally. Git Pushing your changes to the repo will trigger a build on Vercel and your changes will be deployed. You can deploy your Sanity Studio at any time by running npx sanity deploy in the studio directory, as we did earlier.

Run Next.js App Locally

1. Set environment variables:

   • Use the Vercel CLI to link and pull environment variables:

     vercel link
     vercel env pull .env.development.local

   • Alternatively, copy .env.local.example to .env.local and fill in required values. Your projectId and dataset can be found in your Sanity project's Manage Console and selecting your project.

2. Install dependencies and run the NextJS app:

   npm install
   npm run dev

---

Run Sanity Studio Locally

1. Set up environment variables:

• Change directories to the studio directory:
• Duplicate the .env file or copy .env.local.example and fill in the projectId and dataset values, same as the Next.js app. Set SANITY_STUDIO_PREVIEW_URL to the localhost URL of your Next.js app or you can leave it blank and the app will fallback to the default localhost:3000.
• Lastly, you'll want to add localhost:3000 as a CORS origin in your Sanity Manage Console, located under API > CORS Origins.

2. Install dependencies and run the Sanity Studio:

   npm install
   npm run dev

---

📚 Additional Resources

• 🎓 Sanity Learn: Work-ready Next.js
• 📖 Sanity Documentation
• 💬 Join the Sanity Community