5. Deploying to Vercel

A preview of what you’ll build (visually no different, but built for production):

This tutorial has an accompanying GitHub repository called carbon-tutorial-nextjs that we’ll use as a starting point for each step. If you haven’t forked and cloned that repository yet, and haven’t added the upstream remote, go ahead and do so by following the step 1 instructions.

With your repository all set up, let’s check out the branch for this tutorial step’s starting point.

Install the app’s dependencies (in case you’re starting fresh in your current directory and not continuing from the previous step):

Then, start the app:

You should see something similar to where the previous step left off.

Before we deploy our app, we need to create an optimized production build with this command. You may need to CTRL-C to stop the development environment first.

Looking at package.json, you’ll find yarn build to run next build. This builds the app for production to the build folder. It bundles Next.js in production mode and optimizes the build for the best performance. It even goes so far to minify files and include hashes in filenames for caching.

As a lot of this may seem like magic since the build configuration came from Create Next App, go ahead and check out their going to production checklist for a full description of what’s happening.

Next you can deploy your application to your preferred host, such as Vercel, IBM Cloud, Github Pages.