Lesson

Go live on Vercel

Publish your web application to the world. Vercel's hosting and Next.js are made for one another, so it just makes sense to put them together for this project.

For this lesson you'll need a free account at Vercel. You'll be prompted to create one if you do not have one already.

Vercel is an app deployment platform, cloud hosting provider, and much more. Not only can we host the production application there, but its tight integration with Git will create preview builds when developing new features.

In this lesson you'll connect Vercel to your GitHub account in a new project to automatically and continuously deploy your Next.js application to its hosting.

Create a new Vercel project at vercel.com/new

Connect the Vercel project to the repository you made in the last Lesson.

Ensure the Framework Preset has been set to Next.js

Populate the Environment Variables with values from your local .env file.

Click Deploy

You should now be able to watch the Build Logs update as your repository is cloned, its dependencies installed, the site built, and your production Next.js application deployed to hosting.

The same site you were working on locally should now be deployed online for everyone to see.

It's worth noting that Vercel also has a CLI for interacting with projects locally.

Read about Vercel CLI in their documentation.

On the hosted web application, visit /studio to open your Sanity Studio. The first time you do you'll be prompted to add the current URL as a CORS origin. This is required for every unique URL that wishes to interact with your Sanity content client-side. It is okay to click "Continue."

For more detail on CORS and Sanity see the documentation: Access Your Data (CORS)

You can make changes to content in your hosted Studio, and you'll see those changes mirrored locally as well. This is because wherever your Studio is being used, it is always writing to and reading from the Content Lake.

For this reason, developer teams will often use Sanity datasets as a proxy for "environments."

Creating and migrating content between datasets is made simple with the Sanity CLI. The commands below cover creating a new dataset named development, and updating it to the current state of the production dataset.

Run the following to create a new dataset named development

npx sanity@latest dataset create development

Run this to export the current documents and assets from the production dataset

npx sanity@latest dataset export production

Run this to import the production.tar.gz dataset backup into the development dataset

npx sanity@latest dataset import production.tar.gz development

Update the value of your local .env file to use the development dataset

NEXT_PUBLIC_SANITY_DATASET="development"

Now your content updates during development and testing won't impact the production site. You may also choose to configure Vercel to target a different dataset for preview and production builds.

Cross Dataset Duplicator is a popular plugin for allowing authors to move content between datasets from inside the Studio.

You now have the foundational skills to build a content-editable web application:

An account at Sanity for storing content
A basic Next.js application for displaying that content
A lightly-configured Sanity Studio for content editing
An account at GitHub for version controlling your files
A Git workflow for branching, committing changes and merging
An account at Vercel for hosting preview and production builds of your web application

This is all functional, but it's far from finished. In the next lessons you'll look at doing more interesting things on the front end with your content.

Content-driven web application foundations

Go live on Vercel

Create a new Vercel project

Vercel CLI

Hosted Sanity Studio

Datasets as Environments

Quick review

Courses in the "Work-ready Next.js" track