Customizing Next.js Port Configuration

Next.js is a React Web development Framework that is particularly popular among frontend developers. This blog will share small but useful tip for Next.js users.

By default, Next.js utilize port 3000. However, if the port is already allocated to another service, it's possible to change the port used by of Next.js to different one. Following is a step-by-step guide on how to change the default port of a Next.js project.

Prerequisites: Next.js project

1. To begin, Open the 'Package.json' file located in the root directory of the Next.js project. Inside this file, locate the "scripts" section, which should appear as follows:

  "scripts": {

    "dev": "next dev",

    "build": "next build",

    "start": "next start",

    "lint": "next lint"

  }

2. To change the port in development mode, add -p <<port>> to the 'dev' script as shown below. Then this will ensure that the new port is used when running the 'npm run dev' command.

  "scripts": {

    "dev": "next dev -p 8090",

    "build": "next build",

    "start": "next start",

    "lint": "next lint"

  }

3. Further, if you want to change the port used in production, modify the 'start' script as shown below.

 "start": "next start -p 8090",

After changing the 'dev' script with the new port, execute 'npm run dev'. The development application now utilizes the new port.