How to Change a Next.js App Port

Learn how to easily change the port that your Next.js app runs on in development mode to avoid conflicts with other services.

If you’re running a Next.js app locally, it typically runs on port 3000 by default. However, if that port is already in use by another service, you’ll need to change it.

To change the port, follow these steps:

Locate the package.json file in the main folder of your Next.js app.
Open the file and find the section labeled "scripts".
Look for the "dev" script that is responsible for starting the development server.
Modify the "dev" script to include the -p flag followed by the desired port number. For example:
1
"dev": "next dev -p 3001"
This will start Next.js on port 3001 instead of the default 3000.
Save the package.json file.

Now, when you run npm run dev in your command line to start the development server locally, you will see that it is running on the newly specified port, 3001.

By following these steps, you can easily change the port that your Next.js app uses during development, avoiding conflicts and ensuring a smooth development experience.

Tags: Next.js, development, port, app configuration