This starter is a statically generated site that uses Next.js for the frontend and Sanity to handle its content. It comes with a native Sanity Studio that offers features like real-time collaboration, instant side-by-side content previews, and intuitive editing.
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 clean slate site or learn these technologies.
Note
This starter uses the
/pages
directory for Next.js routing.The template will be migrated to the currently experimental /app directory when Vercel announce that it is production ready.
Example Studio with preview |
---|
File(s) | Description |
---|---|
sanity.config.ts |
Config file for Sanity Studio |
sanity.cli.ts |
Config file for Sanity CLI |
/pages/index.tsx |
Landing page for / . |
/pages/studio/[[...index]].tsx |
Where Sanity Studio is mounted |
/pages/api/preview.ts |
Serverless route for triggering Preview mode |
/sanity/schemas.ts |
Where Sanity Studio gets its content types from |
/sanity/env.ts |
Configuration for the Sanity project and dataset |
/sanity/schemas.ts |
Where Sanity Studio gets its content types from |
/sanity/lib/client.ts |
Sanity client configured based on env.ts |
/sanity/lib/image.ts |
Sanity image builder - unused in this template, but is needed to render Sanity images |
/sanity/plugins/IFramePreviewView.tsx |
See adding studio preview |
All pages are wrapped in pages/_document.tsx
and pages/_app.tsx
.
Use the Deploy Button below. It will let you deploy the starter using Vercel as well as connect it to your Sanity Content Lake using the Sanity Vercel Integration.
Clone the repository that was created for you on your GitHub account. Once cloned, run the following command from the project's root directory:
npx vercel link
Download the environment variables needed to connect Next.js and the Studio to your Sanity project:
npx vercel env pull
This will create a git-ignored .env
file with environment variables that will be used for local development.
npm install && npm run dev
When you run this development server, the changes you make in your frontend and studio configuration will be applied live using hot reloading.
Your blog should be up and running on http://localhost:3000! You can create and edit content on http://localhost:3000/studio.
To deploy your changes to production you use git
:
git add .
git commit
git push
Alternatively, you can deploy without a git
hosting provider using the Vercel CLI:
npx vercel --prod
In case of any issues or questions, you can post: