How to change your Next.js Server Port (3000) in Local Development

Learn two ways to change your Next.js projects local development server port 3000. This will allow you to run multiple Next.js projects at once.

Next.js’s local development server runs on port 3000 by default. But what if you need to run multiple Next.js sites at once? No problem.

There are two solutions, one is temporary, one is permanent.

Let’s explore both!

Change Next.js local server port temporarily

When you start your local Next.js server with npm run dev or yarn dev, you can simply attach -p xxxx to the command to launch your server at another port.

For example:

# npm
npm run dev -p 3001 

# yarn
yarn dev -p 3001 

On your next server launch, your Terminal output should look similar to this:

$ next dev -p 3001
ready - started server on http://localhost:3001

This will only change the port for that one instantiation of your Next.js server.

You can change your port to anything you want, 3001 is just an example.

Change Next.js local server port permanently

If you want one of your Next.js projects to permanently run on a specific port, open your package.json file.

Find the line that says "dev": "next dev" and replace it with "dev": "next dev -p 3001".

Your package.json should look similar to this:

{
  "name": "your-website",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev -p 3001",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "next": "10.0.5",
    "react": "17.0.1",
    "react-dom": "17.0.1"
  }
}

Save your package.json file and launch your Next.js server, which will now run on port 3001.