Cómo cambiar el puerto de una aplicación Next.js

Aprenda a cambiar el puerto en el que se ejecuta Next.js en el modo de desarrollo

Me han preguntado cómo cambiar el puerto HTTP de una aplicación creada con Next.js, cuando la está ejecutando localmente. Por defecto, el puerto es3000, pero ese es un puerto de uso común y quizás tenga otro servicio ejecutándose en él.

¿Cómo puedes cambiarlo?

La respuesta está en elpackage.jsonarchivo almacenado en la carpeta principal de la aplicación Next.js.

Por defecto, el contenido del archivo es este:

{
  "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"
  }
}

Nota: los números exactos de los paquetes diferirán en su caso, a medida que se actualicen

Lo que necesitas cambiar es elscriptsparte.

Cambio:

"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: