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 upstreamgit checkout -b v11-next-step-5 upstream/v11-next-step-5
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.