How to change the port of a Next.js application

I have been building my personal website using Next.js. By default, Next.js server runs on port 3000 which is good but sometimes you want to run the server on a different port maybe because you already have a service running on it, or maybe it's not your favorite port(which in my case is 8080). So, let's see how can we change it.

Create a next.js project.

Creating a next.js project is pretty simple and straight forward. Just simply run the below command in your terminal.

Assumption: You already have yarn or npm install on your local.

npm create-next-app
# or
yarn create next-app

You can change the port using the following command.

yarn dev -p 8080
or
npm run dev -p 8080

visit localhost:8080 to see your website up and running. This command is temporary and will run the server on 8080 whenever you enter the above command. But what if you want to make this permanently.

Change the Port Permanently

Once you have your project setup check the package.json file in the main folder.

{
  "name": "hashnode-blog-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "next": "9.5.3",
    "react": "16.13.1",
    "react-dom": "16.13.1"
  }
}

Now what we need to change here is in the dev key inside scripts.

Change it to "dev": "next dev -p 8080", from "dev": "next dev",

Now run the below command to run the server

yarn dev
or
npm run dev

visit the localhost:8080 you should be able to see the website. Something like this.