Change default Next.js app Port

Wanting to change the default port for your Next.js app is a very 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 2 ways to go about solving this.

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

npm run dev -p 3040

or

yarn dev -p 3040

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

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

or

yarn dev

Happy to be of help. :)