How to change a Next.js app port
New Course Coming Soon:
Get Really Good at Git
Learn how to change the port that Next.js runs on in development mode
I’ve been asked how to change the HTTP port of an app built using Next.js, when you are running it locally.
By default the port is 3000
, but that’s a commonly used port and perhaps you have another service running on it.
How can you change it?
The answer is in the package.json
file stored in the Next.js app main folder.
By default the file content is this:
{
"name": "learn-starter",
"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"
}
}
Note: the exact packages numbers will differ in your case, as they get updated
The thing you need to change is the scripts
part.
Change:
"dev": "next dev",
to
"dev": "next dev -p 3001"
to start Next.js on port 3001
instead of 3000
.
Now when you run npm run dev
, the command used to start the development server locally, you will see it start on port 3001
:
Here is how can I help you:
- COURSES where I teach everything I know
- THE VALLEY OF CODE your web development manual
- BOOTCAMP 2024 cohort in progress, next edition in 2025
- BOOKS 16 coding ebooks you can download for free on JS Python C PHP and lots more
- SOLO LAB everything I know about running a lifestyle business as a solopreneur
- Interesting links collection
- Follow me on X