Installation

1. Initialize template with Sanity CLI

Run the command in your Terminal to initialize this template on your local computer:

npm create sanity@latest -- --template https://github.com/serge-0v/next-js-sanity-starter

See the documentation if you are having issues with the CLI.

This command will:

• Create a new Sanity project
• Add API Read Token
• Configure CORS origin for http://localhost:3000
• Set up environment variables
• Clone the repository
• Install dependencies

2. Run the template locally

Start the development servers:

pnpm dev

3. Open the app and sign in to the Studio

• Open the Next.js app at http://localhost:3000
• Open the Studio running locally in your browser on http://localhost:3000/studio. 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. Import Sample Data (Optional)

Import the demo dataset to get started with sample content:

npx sanity dataset import sample-data.tar.gz production --replace

2. Publish your first document

The template comes pre-defined with a schema containing Author, Category, FAQ, Page, Post, and Testimonial document types.

From the Studio, click "+ Create" and select the Page document type. Go ahead and create and publish the document.

Your content should now appear in your Next.js app (http://localhost:3000)

3. Extending the Sanity schema

The schema for the Page document type is defined in the sanity/schemas/document/page.ts file. You can add more document types to the schema to suit your needs.

4. Adding new components

This template includes all components from the Schema UI library.

Deploying your application

1. Configure CORS settings

Add your production URL to the CORS Origins in your Sanity project settings to allow your deployed site to communicate with Sanity.

2. Deploy to Vercel

Deploy your website to Vercel:

1. Create a new repository on GitHub.
2. Push your code to GitHub
3. Create a new Vercel project
4. Connect your GitHub repository and import the project
5. Copy the environment variables from the .env.local file and paste them to your Vercel project settings. Vercel supports pasting all variables at once.
6. Deploy

Inviting collaborators

Now that you've deployed your Next.js application and Sanity Studio, you can optionally invite a collaborator to your Studio. Open up 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.

Configuring Resend (optional)

To use the newsletter form, you need to configure Resend.

1. Create a new Resend account
2. Create a new API key
3. Copy the audience id
4. Set the API key and audience ID in the Vercel project settings or in the .env.local file

Environment variables

All environment variables and their descriptions:

• NEXT_PUBLIC_SITE_URL - your website url. For example, https://yourwebsite.com without trailing slash.
• NEXT_PUBLIC_SITE_ENV - specifies the environment type (development/production) and affects metadata configuration. Setting this to "development" prevents search engine indexing, which is useful for staging environments (e.g., dev.yourwebsite.com).
• NEXT_PUBLIC_SANITY_API_VERSION - your Sanity API version. You don't have to use specific dates, any past or present date is valid, and today's date will always give you the latest version - no need to check release history. For example: YYYY-MM-DD.
• NEXT_PUBLIC_SANITY_PROJECT_ID - your Sanity project ID. For example, abc12345.
• NEXT_PUBLIC_SANITY_DATASET - your Sanity dataset name. For example, production.
• SANITY_API_READ_TOKEN - your Sanity read token for Next.js to fetch data.
• RESEND_API_KEY - your RESEND api key for the newsletter form.
• RESEND_AUDIENCE_ID - your RESEND audience id for the newsletter form to store contacts.