DEV Community

Cover image for How to change the development server port in Next.js
Dhairya Shah
Dhairya Shah

Posted on • Originally published at codewithsnowbit.hashnode.dev

How to change the development server port in Next.js

Introduction

When running up the Next.js application locally, by default the application will run on port 3000 and that's a very commonly used port.

Now the question arises, how to change the server port?

Changing the port

The answer to the question is package.json inside the Next.js application folder.

By default, this is how your package.json looks,

{
  "name": "change-port-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "next": "9.3.5",
    "react": "16.13.1",
    "react-dom": "16.13.1"
  }
}
Enter fullscreen mode Exit fullscreen mode

The thing you need to change is in scripts,

"dev": "next dev",
Enter fullscreen mode Exit fullscreen mode

to:

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

Now the port has changed to 3000 --> 2000

Conclusion

I hope this article was helpful to you! Thank you for reading!

Let’s connect

If you found my content helpful and would like to thank me, feel free to Buy me a coffee :)

Have a great day!

Discussion (1)

Collapse
andrewbaisden profile image
Andrew Baisden

Yep this type of syntax works in a lot of npm projects. This is how you would do it in Create React App.

"start": "PORT=2000 react-scripts start",
Enter fullscreen mode Exit fullscreen mode