JAMStack Starter is a starter template built with Next.js, Tailwind CSS & Sanity CMS by Web3Templates.

https://jamstack-starter-sanity.vercel.app/

Click the above button to deploy for this template on vercel. It is the easist way to clone the repo, configure sanity and deploy to vercel.

The above deploy will automatically configure the following:

• Create new Repository in Github
• Signup/Login to Sanity CMS (if not already)
• Create a Sanity Project
• Install Sanity Integration in Vercel
• Add required CORS & API settings in the project
• Add required .env variables
• Deploy Sanity Studio - Content Manager
• Deploy to Vercel

Once you have deployed the website, visit https://your-published-url.com/studio URL and add your content before visiting your website. Or you will see a blank / broken website. To import demo data as seen in the demo, follow the below steps inside.

1. Clone the github repo you have created in step 1
2. Run the following command to link vercel & pull the .env variables

npx vercel link

Then run the following command

npx vercel env pull

3. Open the Project in VSCode and open the terminal
4. Run the following commands from terminal

npm install
# or
pnpm install

To look like what you have seen in the demo, with all the content and images, follow the below steps:

Run the following commands from terminal

npm run import
# or
pnpm import

Now, refresh your published URL again and you will be able to see your website. To continue develop locally, run the following command

npm run dev
# or
pnpm dev

Now your project should be up and the Next.js frontend will be running on http://localhost:3000. Sanity Studio can be accessed using http://localhost:3000/studio.

If you cannot use the One-Click Deploy option, or if you want to set it up from scratch or to host it on other provider, follow these steps.

Click on the Use this Template button above to create a new repository from this template. Alternatively, you can run the below command to clone this repo to your local system.

git clone https://github.com/surjithctly/jamstack-starter.git yourProjectName
# or
git clone https://github.com/surjithctly/jamstack-starter.git .

Once you have cloned the repo to your localhost, install the dependencies using the following command.

npm install
# or
pnpm install

If you already have a sanity project, you can skip this part, just add the projectId and dataset as mentioned below. If you want to create a new Sanity Project, follow the steps.

Run the following command in the terminal.

npm create sanity@latest
# or
pnpm create sanity@latest

It will ask you to Login/Signup with Sanity, Create a Project or Choose an existing one.

Warning

DO NOT INSTALL THE DEPENDENCIES OR ADD PROJECT FILES. Exit the command after the project is created.

Once you have the project head over to https://sanity.io/manage to copy the Project ID and Dataset name.

Change .env.local.example placed in the root folder and rename it to .env.local. Then add your project ID, Dataset and Revalidate Secret in that file.

NEXT_PUBLIC_SANITY_PROJECT_ID=
SANITY_STUDIO_PROJECT_ID=
NEXT_PUBLIC_SANITY_DATASET=production
SANITY_REVALIDATE_SECRET=

Once everything is setup, You can start develop locally by running the following command

npm run dev
# or
pnpm dev

Now your project should be up and the Next.js frontend will be running on http://localhost:3000. Sanity Studio can be accessed using http://localhost:3000/studio.

If you have trouble setting up this starter template, join on our Discord Community to ask for help.