SimpleNext.js
How to change port in your Next.js app
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"