Build and Deploy a Free CMS-Powered Website (Next.js, Sanity, Netlify)

#ssg #cms #nextjs #sanity

TL;DR

🌎 Live Demo: ssg-nextjs-cms-sanity.netlify.app
📑 Source Code: github.com/arnaudrenaud/ssg-nextjs-cms-sanity

Is this for you?

This guide is meant to help if:

you want a public, mostly read-only website (no user-supplied content)
content is not supposed to change dozens of times per day, as each update will trigger a rebuild

Advantages

If the above fits your needs, you’ll get:

a graphical CMS interface to manage content in the cloud
no server or database to maintain (less work, more security)
no deployment or hosting fees at all
fast-loading pre-rendered pages
browser-side interactivity, if wanted
some form functionality (see contact page)

The toolkit

📝 Language: TypeScript
🛠️ Build: Static Site Generation (SSG) with Next.js (App Router)
📄 Frontend: React.js, Tailwind CSS
🗂️ CMS: Sanity (free tier)
🌍 Hosting: Netlify (free tier)

How it works

Content Management System (CMS)

Content is managed through a web interface offered by Sanity, a cloud provider with a free tier. You may grant editor or administrator rights to users on your Sanity interface (called the Studio).

Entity types, with their attributes and relations, must be defined in code, and then deployed to the studio.

Once these types are deployed, you can create, update and delete records without updating the code.

Example: entity types for a Blog:

Posts: a collection of Post records, each with:
- title (text)
- publishedAt (date)
- mainImage (image upload)
- body (rich text)
- author (reference to Author)
Singletons (unique records), e.g.:
- HomePage (with a hero field)
- Metadata (for SEO: title, description)

Rendering

Pages are written with React, allowing browser-side behavior if wanted.

Next.js retrieves content from Sanity and uses it in page rendering.

Pages are rendered at build-time (server-side), by Next.js with the App Router. This is called static site generation (SSG) and results in a bundle of files: pages (HTML) and their assets (JS, CSS, images, etc.).

Deployment

Deployment is managed by Netlify, a hosting service that serves static websites for free, provided you don't exceed a monthly bandwidth (currently 5 GB) and a good hundred of builds.

You won't have to worry about updating the website following a change: whenever you update content in Sanity or push code changes to GitHub, Netlify is automatically notified and rebuilds the website with the latest content and code.