How to change Next.js port

You can start Next.js development server with the command

npm run dev

This will start the development server on port 3000.

boby@sok-01:/www/learn/nextjs/todo (main)$ npm run dev

> dev
> next dev

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
event - compiled client and server successfully in 1645 ms (163 modules)
wait  - compiling...
event - compiled client and server successfully in 59 ms (163 modules)
wait  - compiling / (client and server)...
event - compiled client and server successfully in 900 ms (183 modules)

If port 3000 is already used on your system, next.js will try to use another available port. If you want to assign a fixed port for your Next.js application, you can specify a port.

Next.js change port

To change the port, edit file package.json

In the file, find

  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },

Replace with

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

This will change the next.js application port to 8001.

If you only want to change one time, you can specify the port when you run “npm run dev” as follows.

PORT=8081 npm run dev

This will run the next.js application on port 8081.

Another way to do the same is

npm run  dev -- --port 8081

Example.

boby@sok-01:/www/learn/nextjs/todo (main)$ npm run  dev -- --port 8081

> dev
> next dev --port 8081

ready - started server on 0.0.0.0:8081, url: http://localhost:8081
event - compiled client and server successfully in 436 ms (163 modules)
wait  - compiling...
event - compiled client and server successfully in 639 ms (163 modules)

See npm