Deployment Guide
Relevant source files
The following files were used as context for generating this wiki page:
This guide provides instructions for deploying the Sanity Next.js Personal Website template to production environments. The project is designed as a statically generated personal website that leverages Sanity Content Lake for content management and Next.js for the frontend application.
The deployment process involves configuring environment variables for Sanity connectivity, setting up a hosting provider (primarily Vercel or Netlify), and ensuring the native Sanity Studio is correctly mounted at the /studio route.
Sources: README.md:5-15, sanity/lib/api.ts:25
Environment Configuration
Successful deployment requires specific environment variables to connect the Next.js frontend and the Sanity Studio to the Content Lake. These variables must be configured in your hosting provider's dashboard.
| Variable Name | Description | Required |
|---|---|---|
NEXT_PUBLIC_SANITY_PROJECT_ID | The unique ID for your Sanity project. | Yes |
NEXT_PUBLIC_SANITY_DATASET | The dataset name (e.g., 'production'). | Yes |
NEXT_PUBLIC_SANITY_API_VERSION | The API version to use (defaults to '2025-02-27'). | No |
SANITY_API_READ_TOKEN | Token for reading private data/drafts. | Yes (for Preview) |
SANITY_API_WRITE_TOKEN | Token for content mutations. | No |
Sources: sanity/lib/api.ts:5-20, netlify.toml:5-9, vercel-installation-instructions.md:27-30
Vercel Deployment
Vercel is the recommended hosting provider for this template, offering a seamless integration with Sanity.
Automated Deployment
Users can utilize the "Deploy with Vercel" button which automates the creation of a GitHub repository and connects the Sanity Vercel Integration to automatically provision environment variables.
Sources: vercel-installation-instructions.md:12-16, README.md:118-124
Manual CLI Deployment
If not using the automated button, the Vercel CLI can be used to link and deploy the project:
- Link Project: Run
npx vercel linkto connect your local directory to a Vercel project. - Pull Variables: Run
npx vercel env pullto download remote environment variables to a local.envfile. - Production Build: Deploy using
git push(if connected to GitHub) ornpx vercel --prod.
Sources: vercel-installation-instructions.md:20-41
Netlify Deployment
The project includes a netlify.toml file to facilitate deployment on the Netlify platform. This configuration specifies incoming hooks for Sanity and maps environment variables required for the build process.
Sources: netlify.toml:1-9
The following flowchart illustrates the general deployment pipeline:
The diagram shows the transition from project initialization through provider-specific configurations to the final production deployment.
Sources: package.json:5-15, vercel-installation-instructions.md:12-16, netlify.toml:1-9
Build Process and Scripts
The deployment build process is handled by the scripts defined in package.json. During a production build, the system generates the Next.js application and extracts the Sanity Studio manifest.
"scripts": {
"build": "next build --turbopack && sanity manifest extract --path public/studio/static",
"start": "next start",
"typegen": "sanity schema extract && sanity typegen generate"
}
Sources: package.json:5-15
Sanity Studio Access
Once deployed, the Sanity Studio is accessible at the /studio route of your production URL. This is managed by the basePath configuration in the Sanity setup and the catch-all route in the Next.js App Router.
Sources: sanity.config.ts:31, sanity/lib/api.ts:25, README.md:52-54
Collaboration
After deployment, collaborators can be invited via the Sanity Management dashboard. They will be able to access the deployed Studio at yourdomain.com/studio to manage content.
Sources: README.md:126-131
Deployment Sequence
The following sequence diagram represents the interaction between the Developer, the Hosting Provider, and Sanity during the deployment phase.
The diagram outlines the build-time interaction where the host communicates with Sanity to generate the site and the run-time interaction for Studio access.
Sources: package.json:7, README.md:52-54, vercel-installation-instructions.md:38-41
Summary
The deployment of the Sanity Next.js Personal Website relies on a clean separation between the Next.js frontend and the Sanity backend. By configuring the mandatory environment variables and using the provided build scripts, the application can be deployed to Vercel, Netlify, or any standard Next.js hosting environment while maintaining a native authoring experience via the integrated Sanity Studio.