Learn how to change the port for running Next.js in development mode
When running locally, someone asked me how to change the HTTP port of an application built with Next.js. By default, the port is3000, But this is a commonly used port, maybe you are running another service.
How do you change it?
The answer ispackage.jsonThe files are stored in the Next.js application main folder.
By default, the content of the file looks like 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 specific package numbers will be different in your case as they will be updated
What you need to change isscriptssection.
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:
Download my free Next.js Handbook
More next tutorials:
- Getting started with Next.js
- Next.js vs Gatsby vs create-react-app
- How to install Next.js
- Linking two pages in Next.js using Link
- Dynamic content in Next.js with the router
- Feed data to a Next.js component using getInitialProps
- Styling Next.js components using CSS
- Prefetching content in Next.js
- Using the router to detect the active link in Next.js
- View source to confirm SSR is working in Next.js
- Next.js: populate the head tag with custom tags
- Deploying a Next.js application on Now
- Next.js: run code only on the server side or client side in Next.js
- Deploying a Next.js app in production
- How to analyze the Next.js app bundles
- Lazy loading modules in Next.js
- Adding a wrapper component to your Next.js app
- The icons added by Next.js to your app
- The Next.js App Bundles
- How to use the Next.js Router
- How to use Next.js API Routes
- How to get cookies server-side in a Next.js app
- How to change a Next.js app port