Skip to main contentCarbon Design System

5. Deploying the project

This is an optional step that takes what we’ve built so far and optimizes the app for a production environment.

Preview

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

Fork, clone and branch

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.

Branch

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

git fetch upstream
git checkout -b v11-next-step-5 upstream/v11-next-step-5

Note: This builds on top of step 4, but be sure to check out the upstream step 5 branch because it includes the static assets required to get through this step.

Build and start app

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

yarn

Then, start the app:

yarn dev

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

Build for production and deploy

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.

yarn build

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.

Edit this page on GitHub
Previous
React tutorial: Step 4
Next
React tutorial: Wrapping up