CODEWITHSUNDEEP
reactjsbuildnext.js
viswa ram
viswa ram

Reputation: 551

How to generate build files in next js

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

.next folder

Upvotes: 29

Views: 89931

Answers (9)

Otto Proaño
Otto Proaño

Reputation: 191

I assume what you are referring to are Static Exports. In recent versions of Next.js you need to add

output: 'export'

to your nextConfig var in the next.config.js file.

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export',
}

module.exports = nextConfig

Then you just need to run

npm run build

and this gonna generate an output folder called out with your static files, so you can deploy on your server without running any command.

Source: https://nextjs.org/docs/pages/building-your-application/deploying/static-exports

Upvotes: 18

Ngatia Frankline
Ngatia Frankline

Reputation: 3216

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 .next folder
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:

Upvotes: 17

AmerllicA
AmerllicA

Reputation: 32522

In my case, I like to know where is the nexjs build files, and by using yarn build I found a hidden folder which name was .next and all of build stuff was there:

nextjs build folder

Upvotes: 4

eslam elameen
eslam elameen

Reputation: 633

there are two different files you can set your build in 1- if you used npm run build direct it will generate the build files in the folder called .next 2- if you want to make a custom folder to put your build in, so at first go to your next.config.js and add distDir:'build'

module.exports = {
distDir: 'build',
}

Upvotes: 11

Rahul Kumar
Rahul Kumar

Reputation: 31

There are two ways to generate the build: 1 through npm

  • npm build 2 through yarn(YARN is a package manager)
  • yarn build (for this you have to add yarn to your project, you can do it by write npm i yarn)
  • to start the server write yarn dev. There are many reasons for your yarn as it has many trouble shooting features and it is faster then npm package mangaer.

Upvotes: 0

Salehi
Salehi

Reputation: 221

You can use next export:

npm run build
npx next export //if next not installed globally

But it disables API routes and instead of http://example.com/about you should use http://example.com/about.html.

using next start:

npm run build
npm run start -p 8080

Upvotes: 4

Yadab Sutradhar
Yadab Sutradhar

Reputation: 659

First, after creating the app, customise the package.json file as your own, like-

 "scripts": {
     "dev": "next dev",
     "build": "next build",
     "start": "next server.js"   
}

then, use yarn dev to run your project in the server default,

http://localhost:3000/

Upvotes: -1

abhishek kasana
abhishek kasana

Reputation: 1522

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

Upvotes: 2

ForrestLyman
ForrestLyman

Reputation: 1652

I generally use the Next CLI for generating Next applications. Its very similar to create-react-app but also generates the structure for Next, following all of the best practices. This includes a Next build script:

npm run build

On a side note I've personally found that the Zeit hosting is an ideal platform for Next apps (they are the guys who develop Next). You can deploy your app as is with the now command, and they handle building etc.

Here's an example of a recent Next app I built which I am hosting on now: https://stage.comerbeber.mx

Upvotes: 0

Related Questions