React tutorial

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

Here's a preview of what you'll build.

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.

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.

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.

Overview

Fork, clone and branch

Branch

Build and start app

Build for production and deploy