How to change Next.JS Localhost port!

How to change Next.JS Localhost port!

Written by Adam. R on Sep 27th, 2021 ・ Views ・ Report Post

Adam. R Visit User Profile

I’ve been asked how to change the HTTP port of an app built using Next.js, when you are running it locally. By default the port is 3000, but that’s a commonly used port and perhaps you have another service running on it.

How can you change it?

The answer is in the package.json file stored in the Next.js app main folder.

By default the file content should look something like this.

{
  "name": "hello-world",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "next": "11.1.2",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  },
  "devDependencies": {
    "eslint": "7.32.0",
    "eslint-config-next": "11.1.2"
  }
}

The versions are different while writing the article.

The thing you need to change is the scripts part.

Change:

"dev": "next dev",

to

"dev": "next dev -p 80"

to start Next.js on port 80 instead of 3000. You can change the port 80 to any other port you wish. I recommend port 80 if you can.

🤩 Our Amazing Sponsors 👇
DigitalOcean View Website
DigitalOcean offers a simple and reliable cloud hosting solution that enables developers to get their website or application up and running quickly.
Laravel News View Website
Laravel News keeps you up to date with everything Laravel. Everything from framework news to new community packages, Laravel tutorials, and more.
Genesis View Website
A Laravel Starter Kit that includes Authentication, User Dashboard, Edit Profile, and a set of UI Components.

Now when you run npm run dev, the command used to start the development server locally, you will see it start on port 80: port80.png If you look at the address bar you don't see a : because broswers remove it if its port 80. If you check console the out when you run npm run dev will show the following:

> hello-world@0.1.0 dev
> next dev -p 80
ready - started server on 0.0.0.0:80, url: http://localhost:80

As you see the URL is port 80!

If you found this usful then please share this and follow me! Also check out my website where I also post everything from here

Comments (0)