How to generate build files in next js

Question

I am learning basic next js. If we run npm run build create-react-app will generate build folder index.html and bundle files. In next js. It doesn't create any build file. How will I deploy next js project in the server

.next folder

Answer 1

Make sure your package.json file scripts appear as follow:

"scripts": { 
    "dev": "next",         // development
    "build": "next build", // build nextapp to .next folder
    "start": "next start", // start nextjs server for .next build folder
    "prod": "next export"  // export nextjs files as bundle like in react app
}

Nodejs needs to be set to production first in .env or use it as below.

npm run build                     # to build the nextjs in .nextfolder
NODE_ENV=production npm run start # set NODE_ENV to production and start server 

However, this will be on default port 3000. You can change the port to serve traffic direct to port 80 and 443 as "start": "next start -p 80", or use advanced reverse proxy like nginx to server your app to the world. I would recommend nginx because it multithreads and have cool security features you can implement.

Further Reading:

• Current Deployment Docs
• Former Deployment Docs

Answer 2

To build your next project, use npm run build & for this to work you need to add this to your scrips in your package.json file-

  "scripts": {
    "dev": "node server.js",
    "build": "next build",
    "start": "next start -p $PORT"
  }

next build is the command which build the projects, which gives you .next folder containing all built content, which actually needs to be deployed on the server, but you will deploy the entire project folder, because you also need to install node modules.

Just ship your whole project to node js ready host and run

npm start