Deploying an app made using Next.js in production is easy. Add those 3 lines to the package.json
script
section:
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start"
}
We used npm run dev
up to now, to call the next
command installed locally in node_modules/next/dist/bin/next
. This started the development server, which provided us source maps and hot code reloading, two very useful features while debugging.
The same command can be invoked to build the website passing the build
flag, by running npm run build
. Then, the same command can be used to start the production app passing the start
flag, by running npm run start
.
Those 2 commands are the ones we must invoke to successfully deploy the production version of our site locally. The production version is highly optimized and does not come with source maps and other things like hot code reloading that would not be beneficial to our end users.
So, let’s create a production deploy of our app. Build it using:
npm run build
The output of the command tells us that some routes (/
and /blog
are now prerendered as static HTML, while /blog/[id]
will be served by the Node.js backend.
Then you can run npm run start
to start the production server locally:
npm run start
Visiting http://localhost:3000 will show us the production version of the app, locally.
Download my free Next.js Handbook
More next tutorials:
- Getting started with Next.js
- Next.js vs Gatsby vs create-react-app
- How to install Next.js
- Linking two pages in Next.js using Link
- Dynamic content in Next.js with the router
- Feed data to a Next.js component using getInitialProps
- Styling Next.js components using CSS
- Prefetching content in Next.js
- Using the router to detect the active link in Next.js
- View source to confirm SSR is working in Next.js
- Next.js: populate the head tag with custom tags
- Deploying a Next.js application on Now
- Next.js: run code only on the server side or client side in Next.js
- Deploying a Next.js app in production
- How to analyze the Next.js app bundles
- Lazy loading modules in Next.js
- Adding a wrapper component to your Next.js app
- The icons added by Next.js to your app
- The Next.js App Bundles
- How to use the Next.js Router
- How to use Next.js API Routes
- How to get cookies server-side in a Next.js app
- How to change a Next.js app port