This starter is a statically generated blog that uses Next.js App Router for the frontend and Sanity to handle its content. It comes with a native Sanity Studio that offers features like real-time collaboration and visual editing with live updates using Presentation.
The Studio connects to Sanity Content Lake, which gives you hosted content APIs with a flexible query language, on-demand image transformations, powerful patching, and more. You can use this starter to kick-start a blog or learn these technologies.
yourblog.com/studio
Use the Deploy Button below, you'll deploy the example using Vercel as well as connect it to your Sanity dataset using the Sanity Vercel Integration.
Execute create-next-app
with npm, Yarn, or pnpm to bootstrap the example:
npx create-next-app --example cms-sanity next-sanity-blog
yarn create next-app --example cms-sanity next-sanity-blog
pnpm create next-app --example cms-sanity next-sanity-blog
Whenever you edit a GROQ query you update the TypeScript types by running:
npm run typegen
If you started with deploying your own then you can run this to reuse the environment variables from the Vercel project and skip to the next step:
npx vercel link
npx vercel pull
Copy the .env.local.example
file to .env.local
to get started:
cp -i .env.local.example .env.local
Run the setup command to get setup with a Sanity project, dataset and their relevant environment variables:
npm run setup
yarn setup
pnpm run setup
You'll be asked multiple questions, here's a sample output of what you can expect:
Need to install the following packages:
sanity@3.30.1
Ok to proceed? (y) y
You're setting up a new project!
We'll make sure you have an account with Sanity.io.
Press ctrl + C at any time to quit.
Prefer web interfaces to terminals?
You can also set up best practice Sanity projects with
your favorite frontends on https://www.sanity.io/templates
Looks like you already have a Sanity-account. Sweet!
✔ Fetching existing projects
? Select project to use Templates [r0z1eifg]
? Select dataset to use blog-vercel
? Would you like to add configuration files for a Sanity project in this Next.js folder? No
Detected framework Next.js, using prefix 'NEXT_PUBLIC_'
Found existing NEXT_PUBLIC_SANITY_PROJECT_ID, replacing value.
Found existing NEXT_PUBLIC_SANITY_DATASET, replacing value.
It's important that when you're asked Would you like to add configuration files for a Sanity project in this Next.js folder?
that you answer No
as this example is alredy setup with the required configuration files.
This far your .env.local
file should have values for NEXT_PUBLIC_SANITY_PROJECT_ID
and NEXT_PUBLIC_SANITY_DATASET
.
Before you can run the project you need to setup a read token (SANITY_API_READ_TOKEN
), it's used for authentication when Sanity Studio is live previewing your application.
🔌 API
tab.+ Add API token
.Permissions
to Viewer
and hit Save
..env.local
file.SANITY_API_READ_TOKEN="<paste your token here>"
Your .env.local
file should look something like this:
NEXT_PUBLIC_SANITY_PROJECT_ID="r0z1eifg"
NEXT_PUBLIC_SANITY_DATASET="blog-vercel"
SANITY_API_READ_TOKEN="sk..."
[!CAUTION]
Make sure to add.env.local
to your.gitignore
file so you don't accidentally commit it to your repository.
npm install && npm run dev
yarn install && yarn dev
pnpm install && pnpm dev
Your blog should be up and running on http://localhost:3000! If it doesn't work, post on GitHub discussions.
Open your Sanity Studio that should be running on http://localhost:3000/studio.
By default you're taken to the Presentation tool, which has a preview of the blog on the left hand side, and a list of documents on the right hand side.
We're all set to do some content creation!
Click on the "+ Create" button top left and select Post
Type some dummy data for the Title
Generate a Slug
Fill in Content with some dummy text
Summarize the Content in the Excerpt field
Select a Cover Image from Unsplash.
Customize the blog name, description and more.
[!IMPORTANT]
For each post record, you need to click Publish after saving for it to be visible outside Draft Mode. In production new content is using Time-based Revalidation, which means it may take up to 1 minute before changes show up. Since a stale-while-revalidate pattern is used you may need to refresh a couple of times to see the changes.
[!NOTE]
If you already deployed with Vercel earlier you can skip this step.
To deploy your local project to Vercel, push it to GitHub/GitLab/Bitbucket and import to Vercel.
[!IMPORTANT]
When you import your project on Vercel, make sure to click on Environment Variables and set them to match your.env.local
file.
After it's deployed link your local code to the Vercel project:
npx vercel link
[!TIP] In production you can exit Draft Mode by clicking on "Back to published" at the top. On Preview deployments you can toggle Draft Mode in the Vercel Toolbar.