Blog Starter Kit with Sanity

The Next.js and Sanity Statically Generated Blog example is a project template that demonstrates how to create a statically generated blog using Next.js as the framework and Sanity as the data source. This example provides a step-by-step guide on setting up the project, running it locally, populating content, deploying it to production, and using features like Preview Mode and On-demand revalidation. Here’s a summary of the steps:

Step 1: Set up the Environment

• Use the Deploy Button to deploy the example using Vercel and connect it to your Sanity dataset using the Sanity Vercel Integration.
• Clone the repository created by Vercel and link your clone to Vercel using npx vercel link.
• Download the necessary environment variables using npx vercel env pull.

Step 2: Run Next.js Locally in Development Mode

• Install dependencies and run Next.js in development mode with npm install && npm run dev or yarn install && yarn dev.

Step 3: Populate Content

• Start the Sanity Studio in another terminal with npm run studio:dev.
• Create content in Sanity Studio and live preview it in Next.js, side-by-side.

Step 4: Deploy to Production & Use Preview Mode from Anywhere

• If you haven’t deployed with Vercel, do so now.
• Configure CORS for production by adding your production URL to the list of CORS origins.
• Add the preview secret environment variable using npx vercel env add SANITY_STUDIO_PREVIEW_SECRET.
• Redeploy production to apply the secret.
• Test locally that the secret is set up correctly.
• Start Preview Mode for Next.js in production from a local Studio using SANITY_STUDIO_PREVIEW_URL=[your production url] npm run studio:dev.
• To revoke access to the preview link, create a new secret.

Step 5: Deploy Your Studio and Publish from Anywhere

• Deploy your Studio and enable real-time content collaboration.

Step 6: Setup Revalidation Webhook

• Create a secret for webhook verification using npx vercel env add SANITY_REVALIDATE_SECRET.
• Apply the secret to production with npx vercel --prod.
• Set up a webhook in Sanity Studio for On-demand Revalidation.
• Test the webhook by editing and publishing content in Sanity Studio.

This example showcases how to create a blog that leverages the power of Next.js and Sanity, with features like real-time previews, on-demand revalidation, and collaboration capabilities.