--- title: "Sanity + Next.js Clean App" description: "A clean Next.js + Sanity starter with visual editing, drag-and-drop page builder, live content updates, and AI-powered media support." url: "https://vercel.com/templates/next.js/sanity-next-js-clean-app" links: repository: "https://github.com/sanity-io/sanity-template-nextjs-clean" demo: "https://template-nextjs-clean.sanity.build" deploy: "https://vercel.com/new/clone?demo-title=Clean+Next.js+%2B+Sanity+app&demo-description=A+clean+Next.js+plus+Sanity+starter+with+real-time+visual+editing%2C+drag-and-drop+page+builder%2C+AI+media+support%2C+and+live+content+updates.&demo-url=https%3A%2F%2Ftemplate-nextjs-clean.sanity.build%2F&project-name=nextjs-clean-website-sanity-template&repository-name=nextjs-clean-website-sanity-template&repository-url=https%3A%2F%2Fgithub.com%2Fsanity-io%2Fsanity-template-nextjs-clean&demo-image=%2F%2Fimages.ctfassets.net%2Fe5382hct74si%2F6CQBiWQCTv5e9YQbYkE7ds%2F37662bbd7ebf5cb41fdc100286335a5a%2F83e807b72c1f9dbc1e28852e6d5d473563581c7b-2400x1260.png&products=%5B%7B%22type%22%3A%22integration%22%2C%22integrationSlug%22%3A%22sanity%22%2C%22productSlug%22%3A%22project%22%2C%22protocol%22%3A%22other%22%7D%5D&root-directory=frontend" --- # Sanity + Next.js Clean App A clean Next.js + Sanity starter with visual editing, drag-and-drop page builder, live content updates, and AI-powered media support. # Clean Next.js + Sanity app This template includes a [Next.js](https://nextjs.org/) app with a [Sanity Studio](https://www.sanity.io/) – an open-source React application that connects to your Sanity project’s hosted dataset. The Studio is configured locally and can then be deployed for content collaboration. ![Screenshot of Sanity Studio using Presentation Tool to do Visual Editing](https://github.com/sanity-io/sanity-template-nextjs-clean/blob/main/sanity-next-preview.png?raw=true) ## Features - **Next.js 16 for Performance:** Leverage the power of Next.js 16 App Router for blazing-fast performance and SEO-friendly static sites. - **Real-time Visual Editing:** Edit content live with Sanity's [Presentation Tool](https://www.sanity.io/docs/presentation) and see updates in real time. - **Live Content:** The [Live Content API](https://www.sanity.io/live) 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 with Drag-and-Drop:** Create and manage pages using a page builder with dynamic components and [Drag-and-Drop Visual Editing](https://www.sanity.io/visual-editing-for-structured-content). - **Powerful Content Management:** Collaborate with team members in real-time, with fine-grained revision history. - **AI-powered Media Support:** Auto-generate alt text with [Sanity AI Assist](https://www.sanity.io/ai-assist). - **On-demand Publishing:** No waiting for rebuilds—new content is live instantly with Incremental Static Revalidation. - **Easy Media Management:** [Integrated Unsplash support](https://www.sanity.io/plugins/sanity-plugin-asset-source-unsplash) for seamless media handling. ## Demo https://template-nextjs-clean.sanity.dev ## Getting Started ### Installing the template > **Already deployed with Vercel?** If you've already deployed using the **Sanity + Vercel Integration** or **one-click Vercel button**, please visit our [Vercel deployment instructions](https://github.com/sanity-io/sanity-template-nextjs-clean/tree/main/vercel-installation-instructions.md) to set up your local environment and deploy Sanity Studio. #### 1. Initialize template with Sanity CLI Run the command in your Terminal to initialize this template on your local computer. ```shell npm create sanity@latest -- --template sanity-io/sanity-template-nextjs-clean ``` See the documentation if you are [having issues with the CLI](https://www.sanity.io/help/cli-errors). #### 2. Run Studio and Next.js app locally Navigate to the template directory using `cd `, and start the development servers by running the following command ```shell npm run dev ``` #### 3. Open the app and sign in to the Studio Open the Next.js app running locally in your browser on [http://localhost:3000](http://localhost:3000). Open the Studio running locally in your browser on [http://localhost:3333](http://localhost:3333). You should now see a screen prompting you to log in to the Studio. Use the same service (Google, GitHub, or email) that you used when you logged in to the CLI. ### Adding content with Sanity #### 1. Publish your first document The template comes pre-defined with a schema containing `Page`, `Post`, `Person`, and `Settings` document types. From the Studio, click "+ Create" and select the `Post` document type. Go ahead and create and publish the document. Your content should now appear in your Next.js app ([http://localhost:3000](http://localhost:3000)) as well as in the Studio on the "Presentation" Tab #### 2. Import Sample Data (optional) You may want to start with some sample content and we've got you covered. Run this command from the root of your project to import the provided dataset (sample-data.tar.gz) into your Sanity project. This step is optional but can be helpful for getting started quickly. ```shell npm run import-sample-data ``` #### 3. Extending the Sanity schema The schema for the `Post` document type is defined in the `studio/src/schemaTypes/post.ts` file. You can [add more document types](https://www.sanity.io/docs/studio/schema-types) to the schema to suit your needs. ### Deploying your application and inviting editors #### 1. Deploy Sanity Studio Your Next.js frontend (`/frontend`) and Sanity Studio (`/studio`) are still only running on your local computer. It's time to deploy and get it into the hands of other content editors. Back in your Studio directory (`/studio`), run the following command to deploy your Sanity Studio. ```shell npx sanity deploy ``` #### 2. Deploy Next.js app to Vercel You have the freedom to deploy your Next.js app to your hosting provider of choice. With Vercel and GitHub being a popular choice, we'll cover the basics of that approach. 1. Create a GitHub repository from this project. [Learn more](https://docs.github.com/en/migrations/importing-source-code/using-the-command-line-to-import-source-code/adding-locally-hosted-code-to-github). 2. Create a new Vercel project and connect it to your Github repository. 3. Set the `Root Directory` to your Next.js app. 4. Configure your Environment Variables. #### 3. Invite a collaborator Now that you’ve deployed your Next.js application and Sanity Studio, you can optionally invite a collaborator to your Studio. Open up [Manage](https://www.sanity.io/manage), select your project and click "Invite project members" They will be able to access the deployed Studio, where you can collaborate together on creating content. ## Resources - [Sanity documentation](https://www.sanity.io/docs) - [Next.js documentation](https://nextjs.org/docs) - [Join the Sanity Community](https://slack.sanity.io) - [Learn Sanity](https://www.sanity.io/learn) [vercel-deploy]: https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fsanity-io%2Fsanity-template-nextjs-clean&project-name=nextjs-clean-website-sanity-template&repository-name=nextjs-clean-website-sanity-template&demo-title=Clean%20Next.js%20%2B%20Sanity%20app&demo-description=A%20clean%20Next.js%20plus%20Sanity%20starter%20with%20real-time%20visual%20editing%2C%20drag-and-drop%20page%20builder%2C%20AI%20media%20support%2C%20and%20live%20content%20updates.&demo-url=https%3A%2F%2Ftemplate-nextjs-clean.sanity.build%2F&demo-image=https%3A%2F%2Fraw.githubusercontent.com%2Fsanity-io%2Fsanity-template-nextjs-clean%2Frefs%2Fheads%2Fmain%2Fsanity-next-preview.png&products=%5B%7B%22type%22%3A%22integration%22%2C%22integrationSlug%22%3A%22sanity%22%2C%22productSlug%22%3A%22project%22%2C%22protocol%22%3A%22other%22%7D%5D&root-directory=frontend ## Related Integrations ### [Sanity](https://vercel.com/marketplace/sanity) The content backend for shipping sites, apps and agents faster. --- ## Additional documentation The [Vercel Knowledge Base](https://vercel.com/kb) contains guides and answers to common questions about Vercel, including deployment, framework configuration, domains, caching, and troubleshooting.