How to change the port of a Next.Js application

05-Aug-2021 Melvin Zacharias

When you run a Next.Js application locally in development mode, it uses the port number 3000. So when you have more than one application to run in development mode, you will have to manually change the port of the second application. The port number can be changed using different methods.

Change Port in Package.Json file.

This method will change the default port permanently for your application. Your Package.Json file will be a file like the following

{
  "name": "mysite1",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "next": "11.0.1",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  },
  "devDependencies": {
    "eslint": "7.32.0",
    "eslint-config-next": "11.0.1"
  }
}

Change the following line

"dev": "next dev",

in the above file to

"dev": "next dev -p 3001",

Now run npm run dev command to start the development server locally on the new port.

Change the development port temporarily.

You can use the following command to change the development port temporarily for your Next.Js application.

 npx next dev -p 3001

This change is temporary. When you start the application after stopping it, the application will again use port 3000.

How to change the port of a Next.Js application

Search

Categories

Tags