surjithctly / jamstack-starter

JAMStack Starter is a simple starter template built with Next.js 13 and Sanity CMS v3. This starter is styled with Tailwind CSS.

JAMStack Starter Template - Next.js & Sanity CMS

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

Live Demo

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

Installation

Step 1: Clone & Deploy

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

Step 2: Add Content

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.

Step 3: Set up the project locally

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

Step 3: Import Demo Data

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

Step 4: Finish it up!

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.

Local Development

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.

Step 1: Clone this repo

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 .

Step 2: Install Packages

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

npm install
# or
pnpm install

Step 3: Configure Sanity

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=

Develop Locally

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.

Help & Support

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