Documentation
Features
Blog & CMS

Blog & CMS

Nowadays every website has a blog, but it's a tedious task to connect one. That is why this template comes with a powerful service called Sanity (opens in a new tab). It is a headless CMS (Content Management System). Why Sanity? Because it is insanely customisable and flexible; it treats content as data which is a better developer experience; and it comes with an admin panel (CMS studio) out of the box. The studio allows you to write content using a cozy editor and publish to your website.

Blog screenshot

Setup

  1. Use the Sanity CLI to log in locally and create a project on Sanity.io
pnpm create sanity@latest --bare

After you have gone through the CLI wizard, you will see

Project ID: xxx
Dataset: xxx

  1. Copy both and insert into the .env file to the corresponding variables NEXT_PUBLIC_SANITY_PROJECT_ID and NEXT_PUBLIC_SANITY_DATASET.

  2. To see the content in the web app, you also need to obtain a read token from Sanity.

    • Go to the project dashboard (opens in a new tab) → API → Tokens → Add API Token with the name "SANITY_API_READ_TOKEN" and the "Viewer" permission.
    • Copy the token and insert into the .env file to the corresponding SANITY_API_READ_TOKEN variable.

  3. Run the development server

pnpm dev

Open http://localhost:3000/studio (opens in a new tab) with your browser to see the CMS. The CMS is already embedded into the Next.js app!

When you write and publish new content, it should become visible at http://localhost:3000/blog (opens in a new tab). Sometimes it might take a few moments for the content to appear.

If you see a CORS error, you might need to add localhost to CORS origins on Sanity to be able to connect locally. Go to the project dashboard (opens in a new tab) → API → CORS origins and add http://localhost:3000.

Editor Customisation

The CMS files are located at apps/cms. You can change the shape of your content by editing files at apps/cms/src/schemas. Learn more about the structure at Sanity Schema Docs (opens in a new tab).

You can completely customise the entire studio. Refer to the Sanity Studio docs (opens in a new tab).

Vercel Integration

Optional. It is possible to connect Sanity to Vercel. The Sanity integration (opens in a new tab) manages necessary environment variables from the Sanity project automatically. However, the limitation is that you can connect both only after the first build on Vercel, refer to the Deploy on Vercel docs.

If you see a CORS error after deployment on Vercel, you might need to add the Vercel link to CORS origins on Sanity to be able to connect. Go to the project dashboard (opens in a new tab) → API → CORS origins and add https://YOUR_LINK.vercel.app.

SEOAuth [PRO]