Change default Next.js app Port

date

Feb 1, 2021

slug

change-nextjs-port

status

Published

tags

Next.js

summary

Let's learn how to change the default Port for our Next.js App.

type

Post

Wanting to change the default port for your Next.js app is a common problem. If any other app or process is running on port 3000, you will get this error in your terminal

Port 3000 is already in use.
error Command failed with exit code 1.

Solution

There are two ways to go about solving this.

First is to give it a temporary port number. It is useful when you want to run your Next.js app on another port for a single time.

npm run dev -p 3040

yarn dev -p 3040

It will run your app on port 3040 for this particular session. Once you close the process, you will have to write this again if you want it on port 3040.

The Second method is to set it inside your package.json's script section.

"scripts": {
    "dev": "next -p 3040", // This will change it for dev environment
    "build": "next build",
    "start": "next start -p 3040" // This will change it for the production
}

Now just run

npm run dev

yarn dev