An opinionated and minimally styled starter template with Tailwind CSS and pre-built schema and modules for rapid website development.
βοΈ Neutrino, π Umbra and π Foliage themes now available as a bundle!
Visit here for more Studio screenshots.
- ποΈ Published on Sanity.io
- β‘ Perfect Lighthouse scores on desktop and 99/100 on mobile.
- π Checkout the demo site, documentation and blog.
- β¨ Modern Frontend Development with Next.js (App Router, RSC, Typescript) and Tailwind CSS.
- π Pre-configured Sanity schema for rapid content structuring.
- π Pre-built frontend components for rapid website development.
- βοΈ Visual editing right inside the Embedded Sanity Studio.
- π Auto-generated Table of Contents component based on headings.
- β¨οΈ Auto-generated sitemap.xml and blog rss.xml.
Directions are also found on the docs.
Clone, fork or use the template from the GitHub template.
From the Sanity.io Manage dashboard, create a new project from scratch (blank schema) with CLI.
# .env.local
NEXT_PUBLIC_BASE_URL = ...
NEXT_PUBLIC_SANITY_PROJECT_ID = ...
NEXT_PUBLIC_SANITY_TOKEN = ... # retrieve from https://sanity.io/manage
Open your new Sanity Studio and add (and publish):
- a Site document with a
title
field. - a Page document with the slug
index
to use as the Home page. - [Optional] a Page document with the slug
404
to use as the Page not found page.
Update the Root Directory (Vercel) / Project Directory (Netlify) with a value of next
. This tells the deployment service to serve the next/ directory and not the root.
Optionally, install either of the following plugins to add a widget to your Studio Dashboard:
# Vercel β https://www.sanity.io/plugins/vercel-dashboard-widget
npm i sanity-plugin-dashboard-widget-vercel
# Netlify β https://www.sanity.io/plugins/sanity-plugin-dashboard-widget-netlify
npm i sanity-plugin-dashboard-widget-netlify
Feel free to adjust styles, add more schema and modules, and more.
Create a new git branch (call it anythingβe.g. staging
or preview
) and set an environment variable specific to that branch in your deployment service (Vercel or Netlify):
# Environment variable for the staging branch (in Vercel, Netlify, etc.)
ENABLE_PREVIEW = true
Now you can use the preview deployment URL to share staged content (unpublished changes) with your team or clients.
- The official Sanity toolkit for Next.js
sanity-io/next-sanity
README- Visual Editing with Next.js App Router and Sanity Studio