- Framework: Next.js
- Styling: Tailwind CSS
- Content: Sanity
- Deployment: Vercel
- Analytics: SplitBee
- Logging: LogFlare
- Performant by default
- SEO
- Internationalization
- Responsive
- Dark Mode Support
sanity start
in the /studio
folder to start the studio locally
- Your Sanity Studio should be running on https://localhost:3333
yarn dev
in the project folder to start the front end locally
- Your front end should be running on https://localhost:3000
- If you don't have the Sanity CLI installed, first run
yarn global add @sanity/cli
to install it globally yarn install && sanity init
in the/studio
folder- During Sanity's init it will warn you, type
Y
and hitenter
:
? The current folder contains a configured Sanity studio. Would you like to reconfigure it? (Y/n)
- When it asks you what dataset configuration to use, go with the
default
- Add CORS Origins to your newly created Sanity project (visit: manage.sanity.io and go to Settings > API): - Add your Studio URLs with credentials:
https://localhost:3333
and[subdomain].sanity.studio
- Add your front-end URLs without credentials:https://localhost:3000
andhttps://[subdomain].vercel.app
yarn install
in the project root folder on local- Create an
.env.local
file in the project folder, and add the following variables: - Update all the
XXXXXX
values, here's where to find each:
NEXT_PUBLIC_SANITY_DATASET=production
NEXT_PUBLIC_SANITY_PROJECT_ID=XXXXXX
SANITY_API_TOKEN=XXXXXX
-
NEXT_PUBLIC_SANITY_PROJECT_ID
- You can grab this after you've init Sanity, either from thestudio/sanity.json
file, or from your Sanity Manage dashboard -
SANITY_API_TOKEN
- Generate an API token for your Sanity project. Access your project from the Sanity Manage dashboard, and navigate to: "Settings" -> "API" -> "Add New Token" button. Make sure you giveread + write
access!
.
├── README.md # README file
├── .github # GitHub folder
├── .husky # Husky configuration
├── .vscode # VSCode configuration
├── public # Public assets folder
├── studio # Sanity
├── src # Source
│ ├── utils # Configs and scripts
│ ├── pages # Next JS Pages
│ ├── typings # Types
│ ├── styles # Styles folder
│ ├── messages # i18n translates
│ └── components # Components
├── tailwind.config.js # Tailwind CSS configuration
└── tsconfig.json # TypeScript configuration
This is setup to work seamlessly with Vercel, which I highly recommend as your hosting provider of choice. Simply follow the on-screen instructions to setup your new project, and be sure to add the same .env.local
variables to your Vercel Project
You can see the results locally in production mode with:
yarn build
You can create an optimized production build with:
yarn build-prod
Now, your site is ready to be deployed. All generated files are located at out
folder, which you can deploy with any hosting service.