How to change port in your Next.js app

Cover Image for How to change port in your Next.js app
Marouane Reda
Marouane Reda
If you need to understand the basics of Next.js, i recommend this course. (Disclaimer : this is an affiliate link that may earn me a small commission, but with no extra cost to you if you choose to enroll)

Next.js apps run locally by default on the port 3000. If you want to run two Next.js apps at once locally, or if this port is already taken (since it is often used ), you will need to run your app on a different port.

How to know if you need to run your Next.js on a port other than 3000

this is fairly obvious when you run npm run dev for example :

MBP-de-Marouane:calcul marouane$ npm run dev

 > dev
 > next

Port 3000 is already in use.
Use `npm run dev -- -p <some other port>`.`

How to change temporarily the port on which Next.js app runs

As seen on the screenshot above :

npm run dev -- -p <some other port>

How to change permanently the port on which your Next.js app runs

In the scripts section of package.json, there will be a command for dev.

Usually it will be "dev": "next".

To set the port number, modify the package.json contents as below to make the port number to any port you like.

"dev": "next dev -p 3001"