Next.js (App Router) + Sanity template.
View a full working demo by visiting nextsanity.com
- Next.js – Framework
- TypeScript – Language
- Tailwind – CSS Framework
- Sanity – Headless CMS
- SendGrid – Email API
- Vercel – Hosting
- ConvertKit Newsletter Signup API
To get started, you'll first need to create a Sanity account.
Once you have created a Sanity account, you can create a new Sanity project by following these instructions.
Next, you'll need to clone this repository, open it in your code editor, run npm install to install the required dependencies and add the following environment variables to a .env.local file:
NEXT_PUBLIC_SANITY_PROJECT_ID – your Sanity Project ID (create an account here - https://sanity.io).
NEXT_PUBLIC_SANITY_DATASET – the name of your dataset (production, development etc).
NEXT_PUBLIC_SANITY_API_VERSION – use the date you created the dataset in the format yyyy-mm-dd.
SANITY_API_READ_TOKEN – create an API token in Sanity with 'Viewer' permissions.
SENDGRID_API_KEY – your SendGrid API key (create an account here - https://sendgrid.com).
YOUR_EMAIL_ADDRESS – contact form submissions will be sent to this email.
WEBSITE_EMAIL_ADDRESS – the email you verified with SendGrid.
NEXT_PUBLIC_SITE_URL - use 'http://localhost:3000' in development and 'https://yourdomain.com' in production.
CONVERT_KIT_API_KEY - your ConvertKit API key
CONVERT_KIT_FORM_ID - your ConvertKit form ID
→ You will need to setup CORS in the Sanity dashboard before you can connect to the Sanity API by following these instructions. Add http://localhost:3000 to connect in development and add your custom domain before deploying to production.
Once everything is set, you can start the development server by running npm run dev. To access your Sanity Studio navigate to localhost:3000/studio. You will need to sign in with the credentials you used to create the project.
→ If you get stuck setting up SendGrid, you can follow this tutorial on Free Code Camp.
→ Remember to run npm install to install all the required dependencies.
→ Remember to add the environment variables to Vercel before deploying to production.
- Twitter (@jamesreaco)
- Website (jamesrea.co)
For business enquiries, you can email me at hello@jamesrea.co.