Apprenez à changer le port sur lequel Next.js s'exécute en mode développement
On m'a demandé comment changer le port HTTP d'une application créée à l'aide de Next.js, lorsque vous l'exécutez localement. Par défaut, le port est3000
, mais c'est un port couramment utilisé et peut-être avez-vous un autre service en cours d'exécution.
Comment pouvez-vous le changer?
La réponse est dans lepackage.json
fichier stocké dans le dossier principal de l'application Next.js.
Par défaut, le contenu du fichier est le suivant:
{
"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"
}
}
Remarque: les numéros de colis exacts diffèrent dans votre cas, à mesure qu'ils sont mis à jour
La chose que vous devez changer est lascripts
partie.
Changement:
"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