CLI de Next.js

La CLI de Next.js te permite iniciar, construir y exportar tu aplicación.

Para obtener una lista de los comandos disponibles en la CLI, ejecuta el siguiente comando dentro del directorio de tu proyecto:

npx next -h

(npx viene incluido con npm 5.2+ y versiones superiores)

La salida debería verse así:

Uso
  $ next <comando>

Comandos disponibles
  build, start, export, dev, lint, telemetry, info

Opciones
  --version, -v   Número de versión
  --help, -h      Muestra este mensaje

Para más información ejecuta un comando con el flag --help
  $ next build --help

Puedes pasar cualquier argumento de node a los comandos de next:

NODE_OPTIONS='--throw-deprecation' next
NODE_OPTIONS='-r esm' next
NODE_OPTIONS='--inspect' next

Bueno saber: Ejecutar next sin un comando es lo mismo que ejecutar next dev

Build

next build crea una versión optimizada para producción de tu aplicación. La salida muestra información sobre cada ruta.

• Size – El número de recursos descargados al navegar a la página del lado del cliente. El tamaño para cada ruta solo incluye sus dependencias.
• First Load JS – El número de recursos descargados al visitar la página desde el servidor. La cantidad de JS compartido por todos se muestra como una métrica separada.

Ambos valores están comprimidos con gzip. La primera carga se indica con verde, amarillo o rojo. Apunta a verde para aplicaciones con buen rendimiento.

Puedes habilitar el perfilado de producción para React con el flag --profile en next build. Esto requiere Next.js 9.5:

next build --profile

Después de esto, puedes usar el perfilador de la misma manera que lo harías en desarrollo.

Puedes habilitar una salida de construcción más detallada con el flag --debug en next build. Esto requiere Next.js 9.5.3:

next build --debug

Con este flag habilitado, se mostrará información adicional de la construcción como rewrites, redirects y headers.

Desarrollo

next dev inicia la aplicación en modo desarrollo con recarga en caliente de código, reporte de errores y más:

La aplicación se iniciará en http://localhost:3000 por defecto. El puerto predeterminado se puede cambiar con -p, así:

npx next dev -p 4000

O usando la variable de entorno PORT:

PORT=4000 npx next dev

Bueno saber: PORT no puede configurarse en .env ya que el inicio del servidor HTTP ocurre antes de que se inicialice cualquier otro código.

También puedes configurar un hostname diferente al predeterminado 0.0.0.0, esto puede ser útil para hacer que la aplicación esté disponible para otros dispositivos en la red. El hostname predeterminado se puede cambiar con -H, así:

npx next dev -H 192.168.1.2

Producción

next start inicia la aplicación en modo producción. La aplicación debe compilarse primero con next build.

La aplicación se iniciará en http://localhost:3000 por defecto. El puerto predeterminado se puede cambiar con -p, así:

npx next start -p 4000

O usando la variable de entorno PORT:

PORT=4000 npx next start

Bueno saber:

• PORT no puede configurarse en .env ya que el inicio del servidor HTTP ocurre antes de que se inicialice cualquier otro código.

• next start no puede usarse con output: 'standalone' o output: 'export'.

Tiempo de espera Keep Alive

Cuando despliegas Next.js detrás de un proxy descendente (ej. un balanceador de carga como AWS ELB/ALB) es importante configurar el servidor HTTP subyacente de Next con tiempos de espera keep-alive que sean mayores que los del proxy descendente. De lo contrario, una vez que se alcance el tiempo de espera keep-alive para una conexión TCP dada, Node.js terminará inmediatamente esa conexión sin notificar al proxy descendente. Esto resulta en un error del proxy cada vez que intenta reutilizar una conexión que Node.js ya ha terminado.

Para configurar los valores de tiempo de espera para el servidor de producción de Next.js, pasa --keepAliveTimeout (en milisegundos) a next start, así:

npx next start --keepAliveTimeout 70000

Lint

next lint ejecuta ESLint para todos los archivos en los directorios pages/, app/, components/, lib/, y src/. También proporciona una configuración guiada para instalar cualquier dependencia requerida si ESLint no está ya configurado en tu aplicación.

Si tienes otros directorios que deseas analizar, puedes especificarlos usando el flag --dir:

next lint --dir utils

Telemetría

Next.js recopila datos de telemetría completamente anónimos sobre el uso general. La participación en este programa anónimo es opcional, y puedes optar por no participar si no deseas compartir información.

Para aprender más sobre Telemetría, por favor lee este documento.

Next Info

next info imprime detalles relevantes sobre el sistema actual que pueden usarse para reportar errores de Next.js. Esta información incluye plataforma/arquitectura/versión del Sistema Operativo, Binarios (Node.js, npm, Yarn, pnpm) y versiones de paquetes npm (next, react, react-dom).

Ejecutar lo siguiente en el directorio raíz de tu proyecto:

next info

te dará información como este ejemplo:

Sistema Operativo:
  Plataforma: linux
  Arquitectura: x64
  Versión: #22-Ubuntu SMP Fri Nov 5 13:21:36 UTC 2021
Binarios:
  Node: 16.13.0
  npm: 8.1.0
  Yarn: 1.22.17
  pnpm: 6.24.2
Paquetes relevantes:
  next: 12.0.8
  react: 17.0.2
  react-dom: 17.0.2

Esta información debe luego pegarse en Issues de GitHub.

Para diagnosticar problemas de instalación, puedes ejecutar next info --verbose para imprimir información adicional sobre el sistema y la instalación de paquetes relacionados con next.