How to Set port in next.js
JavascriptReactjsNpmPortnext.jsJavascript Problem Overview
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
Javascript Solutions
Solution 1 - Javascript
This work for me
"scripts": {
"dev": "next -p 8080"
},
Solution 2 - Javascript
"scripts": {
"dev": "next dev -p 8080", // for dev
"start": "next start -p 8080" // for prod
},
Solution 3 - Javascript
just need to do:
yarn dev -p PORT_YOU_LIKE
Solution 4 - Javascript
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.
Solution 5 - Javascript
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.
Solution 6 - Javascript
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
Solution 7 - Javascript
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 thedev-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 theprod-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 withnpm 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.
Solution 8 - Javascript
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