The Be Sure Blog

Code Snippets | Problem Solving | Tips & Tricks

The Be Sure Blog banner

Change the port of a Next.js app

posted on 12.1.2023 by Below Surface in "Next.js"

To change the port of a Next.js app, there are two ways:

Way One: package.json

In package.json add "-p 3001" to "dev" or "start", whether you want to change the port for development or production. your package.json may look like this now:

"scripts": {
    "dev": "next dev -p 3001",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "export": "next build && next export"

When you run $ npm run dev, the URL will be http://localhost:3001

Way Two: Command line

When starting the development or production server, add "-- -p 3001" to the command, so it may be:

$ npm run start -- -p 3001

Same as before, the url will be http://localhost:3001


port change


More posts of this category

Do a static export of a Next.js website

Doing a static export in Next.js is easy and working great on basic web hosting services


Next.js 13 - how to set dynamic HTML head titles

How to take a slug string and turn it into a HTML title tag


Suppress Next.js img tag warnings

If you don't want to use their Image elements, this is how to disable the warnings


Add a robots.txt to your Next.js website

How to add your robots.txt file


Add Tailwind CSS to your Next.js app

A few commands and some possible error fixing and you are good to go!


Next.js 13 Tailwind CSS hot-reload issue fix

With the currently experimental app directory, hot-reload does not work properly


How to clear the cache of a Next.js application

How to create a fresh build without any cached data


How i finally fixed "sh: 1: next: not found"

My release pipeline failed constantly and it took me three hours to figure out the issue


How I fixed "Parsing error: DeprecationError"

'originalKeywordKind' has been deprecated since v5.0.0 (...)