CLI Next.js

La CLI Next.js permet de démarrer, construire et exporter votre application.

Pour obtenir la liste des commandes CLI disponibles, exécutez la commande suivante dans le répertoire de votre projet :

npx next -h

(npx est inclus avec npm 5.2+ et versions supérieures)

Le résultat devrait ressembler à ceci :

Usage
  $ next <command>

Available commands
  build, start, export, dev, lint, telemetry, info

Options
  --version, -v   Numéro de version
  --help, -h      Affiche ce message

Pour plus d'informations, exécutez une commande avec le flag --help
  $ next build --help

Vous pouvez passer n'importe quel argument node aux commandes next :

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

Bon à savoir : Exécuter next sans commande équivaut à exécuter next dev

Construction

next build crée une version optimisée de production de votre application. Le résultat affiche des informations sur chaque route.

• Taille – Le nombre d'assets téléchargés lors de la navigation vers la page côté client. La taille pour chaque route inclut uniquement ses dépendances.
• First Load JS – Le nombre d'assets téléchargés lors de la visite de la page depuis le serveur. La quantité de JS partagée par tous est indiquée comme une métrique séparée.

Ces deux valeurs sont compressées avec gzip. Le premier chargement est indiqué par du vert, jaune ou rouge. Visez le vert pour des applications performantes.

Vous pouvez activer le profilage de production pour React avec le flag --profile dans next build. Cela nécessite Next.js 9.5 :

next build --profile

Après cela, vous pouvez utiliser le profileur de la même manière qu'en développement.

Vous pouvez activer une sortie de construction plus détaillée avec le flag --debug dans next build. Cela nécessite Next.js 9.5.3 :

next build --debug

Avec ce flag activé, des informations supplémentaires comme les réécritures, redirections et en-têtes seront affichées.

Développement

next dev démarre l'application en mode développement avec rechargement à chaud du code, rapport d'erreurs et plus :

L'application démarrera par défaut sur http://localhost:3000. Le port par défaut peut être changé avec -p, comme ceci :

npx next dev -p 4000

Ou en utilisant la variable d'environnement PORT :

PORT=4000 npx next dev

Bon à savoir : PORT ne peut pas être défini dans .env car le démarrage du serveur HTTP se produit avant l'initialisation de tout autre code.

Vous pouvez également définir un nom d'hôte différent de celui par défaut 0.0.0.0, ce qui peut être utile pour rendre l'application accessible à d'autres appareils sur le réseau. Le nom d'hôte par défaut peut être changé avec -H, comme ceci :

npx next dev -H 192.168.1.2

Production

next start démarre l'application en mode production. L'application doit d'abord être compilée avec next build.

L'application démarrera par défaut sur http://localhost:3000. Le port par défaut peut être changé avec -p, comme ceci :

npx next start -p 4000

Ou en utilisant la variable d'environnement PORT :

PORT=4000 npx next start

Bon à savoir :

• PORT ne peut pas être défini dans .env car le démarrage du serveur HTTP se produit avant l'initialisation de tout autre code.

• next start ne peut pas être utilisé avec output: 'standalone' ou output: 'export'.

Timeout Keep Alive

Lors du déploiement de Next.js derrière un proxy en aval (par exemple un load-balancer comme AWS ELB/ALB), il est important de configurer le serveur HTTP sous-jacent de Next avec des timeouts keep-alive qui sont plus grands que ceux du proxy en aval. Sinon, une fois qu'un timeout keep-alive est atteint pour une connexion TCP donnée, Node.js terminera immédiatement cette connexion sans notifier le proxy en aval. Cela entraîne une erreur de proxy chaque fois qu'il tente de réutiliser une connexion que Node.js a déjà terminée.

Pour configurer les valeurs de timeout pour le serveur de production Next.js, passez --keepAliveTimeout (en millisecondes) à next start, comme ceci :

npx next start --keepAliveTimeout 70000

Lint

next lint exécute ESLint pour tous les fichiers dans les répertoires pages/, app/, components/, lib/, et src/. Il fournit également une configuration guidée pour installer toutes les dépendances requises si ESLint n'est pas déjà configuré dans votre application.

Si vous avez d'autres répertoires que vous souhaitez analyser, vous pouvez les spécifier en utilisant le flag --dir :

next lint --dir utils

Télémétrie

Next.js collecte des données de télémétrie complètement anonymes sur l'utilisation générale. La participation à ce programme anonyme est facultative, et vous pouvez vous désinscrire si vous ne souhaitez pas partager d'informations.

Pour en savoir plus sur la télémétrie, veuillez lire ce document.

Info Next

next info affiche des détails pertinents sur le système actuel qui peuvent être utilisés pour signaler des bugs dans Next.js. Ces informations incluent la plateforme/architecture/version du système d'exploitation, les binaires (Node.js, npm, Yarn, pnpm) et les versions des packages npm (next, react, react-dom).

L'exécution de la commande suivante dans le répertoire racine de votre projet :

next info

vous donnera des informations comme dans cet exemple :

Système d'exploitation :
  Plateforme : linux
  Architecture : x64
  Version : #22-Ubuntu SMP Fri Nov 5 13:21:36 UTC 2021
Binaires :
  Node : 16.13.0
  npm : 8.1.0
  Yarn : 1.22.17
  pnpm : 6.24.2
Packages pertinents :
  next : 12.0.8
  react : 17.0.2
  react-dom : 17.0.2

Ces informations doivent ensuite être collées dans les issues GitHub.

Pour diagnostiquer des problèmes d'installation, vous pouvez exécuter next info --verbose pour afficher des informations supplémentaires sur le système et l'installation des packages liés à next.