Next.js landing pages

Live demo

SEO friendly page builder in React.js. Heroes, sign-up forms and calls to action.

The template contains both a Sanity Studio and a front-end in Next.js. Both are deployed on Vercel.

Deployed your own with sanity.io/create.

You can also deploy with Vercel:

What you have

A dynamic frontend with Next.js
Structured content using Sanity.io
Global deployment on Vercel

Deploy changes

Vercel automatically deploys new changes commited to master on GitHub. If you want to change deployment branch, do so in Customizing the Production Branch on Verce;.

Stuck? Get help

Join Sanity’s developer community or ping us on twitter.

Running the front-end

You'll need to create a .env file to store a few environment variables that Next will use to pull data from the Sanity API.

NEXT_PUBLIC_SANITY_PROJECT_ID=<YOUR-PROJECT-ID>
NEXT_PUBLIC_SANITY_DATASET=<YOUR-DATASET-NAME>
SANITY_STUDIO_API_PROJECT_ID=<YOUR-PROJECT-ID>
SANITY_STUDIO_API_DATASET=<YOUR-DATASET-NAME>

For instance, your file should look like this:

NEXT_PUBLIC_SANITY_PROJECT_ID=abcdefgh
NEXT_PUBLIC_SANITY_DATASET=production
SANITY_STUDIO_API_PROJECT_ID=abcdefgh
SANITY_STUDIO_API_DATASET=production

To find these, visit https://manage.sanity.io

The Project ID is displayed once you select your project. It is an alphanumeric 8-character string.

The dataset is the name of the dataset that you want to use. For instance "production".

Once those env variables are in place, you can run the following commands to get Next's development server up and running:

npm install

# Run the frontend
npm run dev

# Run the Studio
npm run start:sanity