Steps to Create the Next App

Step 1: Set up Next.js Project using the Command:

npx create-next-app port-change

Step 2: Navigate to the Project folder using:

cd port-change

Project Structure:

The updated dependencies in package.json file will look like:

  "dependencies": {
"react": "^18",
"react-dom": "^18",
"next": "14.2.1"
}

How to change port in Next.js App

Next.js provides the flexibility to change the default port of the development server using command-line options such as -p <port_number> or by updating the “scripts” section in the package.json file, offering developers multiple ways to customize the port configuration based on their requirements.

Table of Content

  • 1. Updating package.json File
  • 2. Specify Port Number in Run Command

Similar Reads

Steps to Create the Next App

Step 1: Set up Next.js Project using the Command:...

Approach 1: Updating package.json File

In this approach, we are updating the “scripts” section in package.json to specify the desired port, such as “dev”: “next dev -p 3001“. This configures Next.js to run on the specified port when using the development script, allowing the React component to detect and display the current port when a button is clicked....

Approach 2: Specify Port Number in Run Command

In this approach, we specify the port number when running the Next.js development server using the command npm run dev — -p , allowing the React component to detect and display the current port when a button is clicked without altering the package.json file....