A fully-featured starter template made with Next.js, Sanity, TypeScript, Tailwind & more.
- Next.js (App Router)
- Sanity
- TypeScript
- Tailwind
- Shadcn
- Resend
- React Hook Form & Zod
- Vercel
- Page Builder with 12 pre-made blocks to get you started.
- Visual Editing, Live Preview and Live Content API integrations.
- Form Builder to create custom forms without leaving the Studio.
- Robust website settings implementation.
- Custom input components for an enchanced content editing experience.
- Fully-featured blog with table of contents generation, custom portable text blocks, search functionality and more.
- Create a new Sanity Project.
- Add CORS origin for
http://localhost:3000. - Create an API token with
viewerpermissions.
- Clone this repository and open it your code editor.
- Create a
.env.localfile and add the following environment variables:
| Environment Variable | Description |
|---|---|
NEXT_PUBLIC_SITE_URL |
The public URL of your website (use http://localhost:3000 during development) |
NEXT_PUBLIC_SITE_NAME |
The name of your website |
NEXT_PUBLIC_SANITY_DATASET |
The name of your Sanity dataset (usually "production") |
NEXT_PUBLIC_SANITY_PROJECT_ID |
Your Sanity project ID found in project settings |
NEXT_PUBLIC_SANITY_API_VERSION |
The Sanity API version to use (e.g., "2023-05-03") |
RESEND_SENDER_EMAIL |
The email address used to send emails via Resend |
RESEND_RECIEVER_EMAIL |
The email address that receives contact form submissions |
RESEND_API_KEY |
Your Resend API key for email functionality |
SANITY_API_READ_TOKEN |
API token for accessing Sanity content |
Next, run these commands in your terminal at the root of your project:
| Command | Action |
|---|---|
npm install --legacy-peer-deps |
Installs dependencies. |
npx sanity dataset import demo-content.tar.gz production |
Imports demo content (optional). |
| Command | Action |
|---|---|
npm run dev |
Starts local dev server at http://localhost:3000 |
- LinkedIn (@jamesreaco)
- Website (jamesrea.co)
- X (Twitter) (@jamesreaco)