How to Set port in next.js

Question

one application is running on port 3000 and I want to run another application on a different port of the default port. How I change this in React Next.js. My package.js script is

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "next",
    "build": "next build",
    "start": "next start"
  },

and start script command is npm run dev

https://github.com/zeit/next.js/issues/102 – evolutionxbox Feb 10 '20 at 09:37 — evolutionxbox, Feb 10 '20 at 09:37

score 199 · Accepted Answer · edited Sep 29 '21 at 21:43

199

This work for me

 "scripts": { 
       "dev": "next -p 8080" 
},

edited Sep 29 '21 at 21:43

Dharman

26,923
21
73
125

answered Feb 10 '20 at 09:40

Sohail Ahmad

4,089
5
21
40

It didn't wokrd out. – Pushp Singh Apr 22 '20 at 08:45
12

If you're using the `dev` next command in your script, for me today this only works by specifying after next command, e.g. `next dev -p 8080` and `next start -p 8080` for prod mode, as opposed to before like this: `next -p 8080 dev`. – Phil Gibbins Jun 06 '20 at 11:50
Perfect thanks! – Alaeddine Dec 14 '21 at 22:40
This works for me in project that created by create-next-app. Thanks a lot. – Parker Lucenzo Feb 09 '22 at 05:08

score 54 · Answer 2 · answered Dec 13 '20 at 16:10

54

"scripts": {
    "dev": "next dev -p 8080", // for dev 
    "start": "next start -p 8080" // for prod
},

answered Dec 13 '20 at 16:10

Alongkorn

3,376
1
23
40

2

This really isn't; the port shouldn't be baked into a startup script. – kevlarr Jul 09 '21 at 18:45

score 19 · Answer 3 · answered Jun 26 '20 at 11:50

19

just need to do:

yarn dev -p PORT_YOU_LIKE

answered Jun 26 '20 at 11:50

Alexis Troncoso

219
2
4

6

For long term value, please explain why this code solves OP's issue. Code only answers are frowned upon. Explanations help future visitors learn, and apply this knowledge to similar issues that have in their own code. They are also more likely to be upvoted. Consider editing to improve your answer, and keep quality of SO Answers high. Thanks for your contribution. – SherylHohman Jun 26 '20 at 15:31
1

the .env file doesn't work on next js. Anyone who has a working solution can help drop the solution – Ibeanu Hillary Nov 26 '20 at 07:01
1

I like this approach. This worked for me instead of changing PORT in any other file. Thank you. – Kodali444 May 28 '21 at 17:36

Chukwu3meka · Answer 4 · 2021-08-03T06:39:30.627

The application will start at http://localhost:3000 by default. The default port can be changed with -p, like so:

 npx next dev -p 4000

Or using the PORT environment variable:

PORT=4000 npx next dev

#note that I used npx not npm

You can also set the hostname to be different from the default of 0.0.0.0, this can be useful for making the application available for other devices on the network. The default hostname can be changed with -H, like so:

 npx next dev -H 192.168.1.2

If you're getting an error that the port is already in use, what you can do to resolve it on windows is

Go to the Task Manager.

Scroll and find a task process named. Node.js: Server-side

End this particular task.

score 8 · Answer 5 · answered Jun 29 '21 at 06:14

8

There are two ways to do so:

In your package.json file, add -p 8080 to the dev/start scripts to start the server on port 8080:

  "scripts": {
    "dev": "next -p 8080",
    "build": "next build",
    "profile-build": "next build --profile",
    "start": "next start -p 8080"
  }

Alternatively, if you don't want to hardcode this in the package.json file, you could start the script with ENV variable PORT.

PORT=8080 npm run dev

Visit vercel documentation for more information.

answered Jun 29 '21 at 06:14

Jai Pandya

1,809
16
28

4

Nice. So curious why this is the only answer (here and elsewhere that I've seen) that mentions using the `PORT=` variable. There's no reason a port number should be baked into an `npm` script. – kevlarr Jul 09 '21 at 18:57
`'PORT' is not recognized as an internal or external command` i am facing this – Sunil Garg Oct 11 '21 at 08:02

score 3 · Answer 6 · answered Oct 11 '21 at 08:07

3

Setting port number in npm script is not good idea at all.

From terminal you can pass the port number by using following command

SET PORT=3001 && npm start

answered Oct 11 '21 at 08:07

Sunil Garg

12,670
19
110
153

ronatory · Answer 7 · 2021-10-30T13:47:29.513

A workaround using environment variables via .env file

Thanks to this github comment

For development

Create a script for your dev environment in the project root e.g. dev-server.js

// dev-server.js
require('dotenv').config(); // require dotenv
const cli = require('next/dist/cli/next-dev');

cli.nextDev(['-p', process.env.PORT || 3000]);

Then you can set a custom port in your .env like this: PORT=3002
Update the dev command in your package.json to use the dev-server.js script like this:

  "scripts": {
    "dev": "node dev-server.js"
  }

Run npm run dev and the NextJS application will start on port 3002.

For production

Create a script for your prod environment in the project root e.g. prod-server.js

// prod-server.js
require('dotenv').config(); // require dotenv
const cli = require('next/dist/cli/next-start');

cli.nextStart(['-p', process.env.PORT || 3000]);

Then you can set a custom port in your .env like this: PORT=3002
Update the start command in your package.json to use the prod-server.js script like this:

  "scripts": {
    "build": "next build",
    "start": "node prod-server.js"
  }

Run npm run start and the NextJS application will start on port 3002. (Don't forget to build the project before with npm run build)

dotenv should be installed via npm install dotenv, required and configured in the scripts as seen in the code snippets before.

Note from the github comment:

There are some hosting providers that just force us to have server.js/index.js file. The bonus of the above solution is that it doesn't require any additional dependency.

score 2 · Answer 8 · answered Feb 16 '22 at 11:28

2

With yarn you can easy pass any arguments:
yarn dev -p 8080 or yarn dev --port=8080.

With npm using -- to pass arguments:
npm run dev -- -p 8080

answered Feb 16 '22 at 11:28

nghiepit

3,248
2
19
25

How to Set port in next.js

8 Answers8

A workaround using environment variables via .env file

Linked

Related