282

One application is running on port 3000 and I want to run another application on a different port from the default port, which is 3000. How do I change this in React Next.js? My package.json currently contains:

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

And the CLI command that I use to start dev is npm run dev.

2

18 Answers 18

548

This work for me:

"scripts": { 
    "dev": "next dev -p 8080",
    "start": "next start -p 8080",
},
6
  • 1
    It didn't wokrd out. Commented Apr 22, 2020 at 8:45
  • 25
    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. Commented Jun 6, 2020 at 11:50
  • This works for me in project that created by create-next-app. Thanks a lot. Commented Feb 9, 2022 at 5:08
  • 16
    @C10N With that, I got Invalid project directory provided, no such directory. I used npm run dev -- -p 5000 instead and that worked.
    – Manpreet
    Commented Aug 18, 2023 at 6:40
  • 1
    this doesn't seem to work anymore for start (next 13.5.6). But this works: PORT=3001 npm run start (from the command line), or just changing the "scripts" part of package.jsonto "start": "PORT=3001 next start"
    – LGenzelis
    Commented Oct 27, 2023 at 18:35
84
"scripts": {
    "dev": "next dev -p 8080", // for dev 
    "start": "next start -p 8080" // for prod
},
1
  • 6
    This really isn't; the port shouldn't be baked into a startup script.
    – kevlarr
    Commented Jul 9, 2021 at 18:45
50

With yarn, pnpm you can easily pass any arguments:
yarn dev -p 8080 or yarn dev --port=8080

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

0
34

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.
27

just need to do:

yarn dev -p PORT_YOU_LIKE
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. Commented Jun 26, 2020 at 15:31
  • 1
    the .env file doesn't work on next js. Anyone who has a working solution can help drop the solution Commented Nov 26, 2020 at 7:01
  • 1
    I like this approach. This worked for me instead of changing PORT in any other file. Thank you.
    – Kodali444
    Commented May 28, 2021 at 17:36
  • In my case the port parameter yarn dev -p 4000 was just ignored. App still responded on http://localhost:3000/ not on http://localhost:4000/ (although I could see in the terminal concurrently "npm run server" "npm run client" -port 4000).
    – Matt
    Commented Aug 21, 2023 at 7:17
22

A workaround using environment variables via .env file

Thanks to this github comment

For development

  1. 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]);
  1. Then you can set a custom port in your .env like this: PORT=3002

  2. Update the dev command in your package.json to use the dev-server.js script like this:

  "scripts": {
    "dev": "node dev-server.js"
  }
  1. Run npm run dev and the NextJS application will start on port 3002.

For production

  1. 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]);
  1. Then you can set a custom port in your .env like this: PORT=3002

  2. 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"
  }
  1. 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.

16

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.

2
  • 5
    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
    Commented Jul 9, 2021 at 18:57
  • 'PORT' is not recognized as an internal or external command i am facing this
    – Code Guru
    Commented Oct 11, 2021 at 8:02
7

Usually, the port is environment specific so it shouldn't go to git repository. Thus the best practise is to define it in .env.local, and it can be read from there using the following start script:

// package.json
"scripts": {
  "start": "[ -e .env.local ] && set -a && . ./.env.local; next start",
},

Using the set -a will export the sourced environment variables, and the Next.JS start script will use the PORT environment variable if defined. Note that this script won't work in Windows.

2
  • 1
    Works great for me! The command looks cryptic if you don't know shell scripting, but I prefer this over the alternatives. Thank you! Commented May 21, 2023 at 16:45
  • Could you explain the elements of the command? Commented Aug 3, 2023 at 15:16
5

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
1
  • I am currently testing 2 applications on the same PC, for that having one single PORT variable won't work (because both applications would use the same variable). How can we introduce different port varialbles (like APP1_PORT and APP2_PORT) ?
    – Matt
    Commented Aug 21, 2023 at 8:19
3

Using the -p or --port option with the next dev command allows you to specify a custom port for your Next.js development server.

For example:

next dev -p 4000

This command will start your Next.js development server on port 4000.

3

npm run dev -- -p 4000 this works for me.

1

For NextJS 13, all you have to do is specify it in your terminal. Run:

npm run dev -p 4000

To run the app on port 4000

1
  • 2
    Shouldn't it be npm run dev -- -p 4000?
    – ukrutt
    Commented Apr 23 at 21:20
1

You can start your app with this command:

npx env-cmd -f ".env" npm run dev

Where env-cmd -f ".env" loads environment variables. And .env file looks as below:

PORT=4000 # new port

You could also simplify this process by modify package.json scripts:

"dev": "npx env-cmd -f \".env\" next dev"

And after that:

npm run dev
0

following example will be work for nextjs and pm2 combination pm2 start npx --name "next" -- next -p 3001

0

Another way is using a custom Server file in Next.js

So you can just set your port in env file and not having to change anywhere else.

Somehting like below example

const express = require('express');
const next = require('next');
const getConfig = require('../next.config');


const { basePath, port } = getConfig.publicRuntimeConfig;

const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });

app.prepare().then(() => {
  const app = express();

  app.use(express.json());
  app.use(express.urlencoded({ limit: '20kb', extended: false }));


  app.listen(3000, (err) => {
    if (err) throw err;
    console.log('server running on port: ' + 3000);
  });
});
0

Usually, the port is environment specific and should not be included in the package.json. Therefore, it's best practice to define the port using environment variables, which can be done conveniently using the dotenv-cli package:

  1. Install the package: npm install dotenv-cli
  2. Add port to .env file:
    PORT=3001
    
  3. Use the following start script to read PORT env variable from .env and .env.local files (omit -c flag to only read .env file):
    "start": "dotenv -c -- next start",
    
-1

For some reason, the answer in https://stackoverflow.com/a/69780065/6831932 doesn't work for me, but fails with

/path/to/project/node_modules/next/dist/bin/next:147
commands[command]().then((exec)=>exec(forwardedArgs)
                                 ^

TypeError: exec is not a function
    at /path/to/project/node_modules/next/dist/bin/next:147:34
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

Node.js v19.8.1
npm ERR! Lifecycle script `dev` failed with error:
npm ERR! Error: command failed
npm ERR!   in workspace: [email protected]
npm ERR!   at location: /path/to/project/apps/frontend

My workaround is to use node:child_process to spawn next:


const dotenv = require('dotenv');
// For some reason trying to invoke nextDev() from 'next/dist/cli/next-dev'
// doesn't work, even though others report success with it.
// So, let's try invoking `next` as a child process...
const {spawn} = require('node:child_process');

// I have a monorepo with node_modules and .env only at project root.
// If you don't, you can remove the '/../../' part.
const projectRoot = process.cwd() + '/../../';

// Get the .env file from the root of the project.
dotenv.config({path: projectRoot + '.env'});

// Get next binary path and default args.
const nextPath = projectRoot + 'node_modules/.bin/next';
const FRONTEND_PORT = process.env.FRONTEND_PORT || '4000';
const FRONTEND_HOST = process.env.FRONTEND_HOST || 'localhost';
const nextArgs = [
  'dev',
  '-p', FRONTEND_PORT,
  '-H', FRONTEND_HOST,
];

// Spawn next process.
const next = spawn(nextPath, nextArgs);

// Log output from next process.
next.stdout.on('data', (data) => {
  if (typeof data === 'string') {
    console.log(data);
  } else {
    console.log(data.toString());
  }
});

// Log errors from next process.
next.stderr.on('data', (data) => {
  if (typeof data === 'string') {
    console.error(data);
  } else {
    console.error(data.toString());
  }
});
-2

Apart from hard coding it in package.json, you could do it via .env file:

PORT=4000
0

Not the answer you're looking for? Browse other questions tagged or ask your own question.