How to Run Next.js on Custom Port

Last updated on May 23, 2022 A Goodman Loading... Post a comment

By default, a Next.js app will run on port 3000 (both development and production). However, you can use another port if you like. This short and straight-to-the-point article will show you how to do so.

Modifying the package.json file

Open the package.json file in the root directory of your Next.js project, find the scripts section, and add -p [your desired port] to next dev (development) and next start (production) like this:

"scripts": {
    "dev": "next dev -p 15000",
    "build": "next build",
    "start": "next start 18000",
    "lint": "next lint"
}

Screenshot:

Adding the port when running the app

If you don’t want to change your package.json file, you can add your custom port when you run the npm run dev or npm start commands.

Development:

npm run dev -- -p 15000

Screenshot:

Production mode:

npm start -- -p 20000

That’s it. Further reading:

You can also check our React topic page and Next.js topic page for the latest tutorials and examples.

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

You May Also Like