DEV Community

Cover image for How to change the default port number in Next.js application
Karthikeyan
Karthikeyan

Posted on • Originally published at imkarthikeyans.hashnode.dev

2

How to change the default port number in Next.js application

Hello everyone,

In this short blog post , I will be writing about how we can override the default port number in Next.js application.

Why am I writing this ?

Today when I was working I had to run two different Next.js application say app A and app B . Since the default port of Next.js application was 3000 and I was not able to run app B .

Immediately went online searching for how to change port , it was simple one.

let's dive in

https://media.giphy.com/media/2GjgvS5vA6y08/giphy.gif

How do we change it ?

let's assume that you have Next.js app bootstrapped using manual configuration or using create-next-app .

Go to package.json file of your Next.js app and do the following

Note: Following is the package.json from my side project which I have been working on.

{
  "name": "front-end",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev", 
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@chakra-ui/icons": "1.1.0",
    "@chakra-ui/react": "1.7.0",
    "@emotion/react": "11.5.0",
    "@emotion/styled": "11.3.0",
    "axios": "0.24.0",
    "framer-motion": "5.0.0",
    "next": "12.0.3",
    "nookies": "2.5.2",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-icons": "^4.3.1"
  },
  "devDependencies": {
    "@types/react": "17.0.34",
    "eslint": "8.0.1",
    "eslint-config-next": "12.0.3",
    "typescript": "4.4.4"
  }
}
Enter fullscreen mode Exit fullscreen mode

to

{
  "name": "front-end",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev -p 3001",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@chakra-ui/icons": "1.1.0",
    "@chakra-ui/react": "1.7.0",
    "@emotion/react": "11.5.0",
    "@emotion/styled": "11.3.0",
    "axios": "0.24.0",
    "framer-motion": "5.0.0",
    "next": "12.0.3",
    "nookies": "2.5.2",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-icons": "^4.3.1"
  },
  "devDependencies": {
    "@types/react": "17.0.34",
    "eslint": "8.0.1",
    "eslint-config-next": "12.0.3",
    "typescript": "4.4.4"
  }
}
Enter fullscreen mode Exit fullscreen mode

Based on the above code, only change which has to be made is to add -p in next dev with port number at the end.

"dev": "next dev -p 3001"
Enter fullscreen mode Exit fullscreen mode

https://media.giphy.com/media/cgITA6yha7hVC/giphy.gif

Now go to your terminal and run yarn run dev your second Next.js application should be running on port 3001. Go to http://localhost:3001 url to see the app live on your local machine.

Conclusion:

That's pretty much it. Thank you for taking the time to read the blog post. If you found the post useful , add ❤️ to it and let me know if I have missed something in the comments section. Feedback on the blog are most welcome.

Let's connect on twitter : (https://twitter.com/karthik_coder)

https://media.giphy.com/media/eujb1tWaj3ZxS/giphy.gif

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (0)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more