This is a starter repo used as a part of the Headless CMS Workshop. It walks through the steps needed to build out a statically generated website that uses Next.js for the frontend, Sanity to handle its content and Vercel to deploy to production.
Access the workshop presentation here, which will guide you through the steps to build out your own site! You can find the completed example by checking out the complete-example branch.
-
Intro
- What is headless architecture?
- What is Next.js?
- What is Sanity.io?
-
Setting up the Repo
-
Setting up Sanity.io
- Content modeling
- Querying content with GROQ
-
Setting up Next.js
- Dynamic routing
- Fetching page data
- Page builder
-
Deploying to production on Vercel
Storybook contains all the prebuilt components we'll be working with. To access storybook locally run:
npm run storybookNavigate to http://localhost:6006.
You can start development environment for the frontend app by running:
npm run devNavigate to http://localhost:3000
For this implementation, the Sanity Studio is embedded inside our Next.js app. This means that you just need to start the development environment for the frontend app and navigate to http://localhost:3000/studio.