CLI Next.js

La CLI Next.js vous permet de développer, construire, démarrer votre application et plus encore.

Utilisation basique :

Terminal

npx next [commande] [options]

Référence

Les options suivantes sont disponibles :

Options	Description
`-h` ou `--help`	Affiche toutes les options disponibles
`-v` ou `--version`	Affiche le numéro de version de Next.js

Commandes

Les commandes suivantes sont disponibles :

Commande	Description
`dev`	Démarre Next.js en mode développement avec Hot Module Reloading, rapport d'erreurs et plus.
`build`	Crée une version optimisée de production de votre application. Affiche des informations sur chaque route.
`start`	Démarre Next.js en mode production. L'application doit d'abord être compilée avec `next build`.
`info`	Affiche des détails pertinents sur le système actuel qui peuvent être utilisés pour signaler des bugs Next.js.
`lint`	Exécute ESLint pour tous les fichiers dans les répertoires `/src`, `/app`, `/pages`, `/components` et `/lib`. Fournit également une configuration guidée pour installer les dépendances requises si ESLint n'est pas déjà configuré dans votre application.
`telemetry`	Permet d'activer ou désactiver la collecte de télémétrie complètement anonyme de Next.js.

Bon à savoir : Exécuter next sans commande est un alias pour next dev.

Options de `next dev`

next dev démarre l'application en mode développement avec Hot Module Reloading (HMR), rapport d'erreurs et plus. Les options suivantes sont disponibles lors de l'exécution de next dev :

Option	Description
`-h, --help`	Affiche toutes les options disponibles.
`[répertoire]`	Un répertoire dans lequel construire l'application. Si non fourni, le répertoire courant est utilisé.
`--turbopack`	Démarre le mode développement en utilisant Turbopack.
`-p` ou `--port <port>`	Spécifie un numéro de port sur lequel démarrer l'application. Par défaut : 3000, env: PORT
`-H`ou `--hostname <hostname>`	Spécifie un nom d'hôte sur lequel démarrer l'application. Utile pour rendre l'application disponible pour d'autres appareils sur le réseau. Par défaut : 0.0.0.0
`--experimental-https`	Démarre le serveur avec HTTPS et génère un certificat auto-signé.
`--experimental-https-key <chemin>`	Chemin vers un fichier de clé HTTPS.
`--experimental-https-cert <chemin>`	Chemin vers un fichier de certificat HTTPS.
`--experimental-https-ca <chemin>`	Chemin vers un fichier d'autorité de certification HTTPS.
`--experimental-upload-trace <traceUrl>`	Envoie un sous-ensemble des traces de débogage à une URL HTTP distante.

Options de `next build`

next build crée une version optimisée de production de votre application. La sortie affiche des informations sur chaque route. Par exemple :

Terminal

Route (app)                              Taille     Premier chargement JS
┌ ○ /_not-found                          0 B               0 kB
└ ƒ /products/[id]                       0 B               0 kB

○  (Statique)   prérendu comme contenu statique
ƒ  (Dynamique)  rendu côté serveur à la demande

Taille : La taille des 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.
Premier chargement JS : La taille des assets téléchargés lors de la visite de la page depuis le serveur. La quantité de JS partagée par tous est affiché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.

Les options suivantes sont disponibles pour la commande next build :

Option	Description
`-h, --help`	Affiche toutes les options disponibles.
`[répertoire]`	Un répertoire sur lequel construire l'application. Si non fourni, le répertoire courant sera utilisé.
`-d` ou `--debug`	Active une sortie de construction plus verbeuse. Avec ce flag activé, des sorties supplémentaires comme les réécritures, redirections et en-têtes seront affichées.

`--profile`	Active le profilage pour React en production.
`--no-lint`	Désactive le linting.
`--no-mangling`	Désactive le name mangling. Cela peut affecter les performances et ne devrait être utilisé qu'à des fins de débogage.
`--experimental-app-only`	Construit uniquement les routes du routeur App.
`--experimental-build-mode [mode]`	Utilise un mode de construction expérimental. (choix : "compile", "generate", par défaut : "default")

Options de `next start`

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

Les options suivantes sont disponibles pour la commande next start :

Option	Description
`-h` ou `--help`	Affiche toutes les options disponibles.
`[répertoire]`	Un répertoire sur lequel démarrer l'application. Si aucun répertoire n'est fourni, le répertoire courant sera utilisé.
`-p` ou `--port <port>`	Spécifie un numéro de port sur lequel démarrer l'application. (par défaut : 3000, env: PORT)
`-H` ou `--hostname <hostname>`	Spécifie un nom d'hôte sur lequel démarrer l'application (par défaut : 0.0.0.0).
`--keepAliveTimeout <keepAliveTimeout>`	Spécifie le nombre maximum de millisecondes à attendre avant de fermer les connexions inactives.

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

La sortie devrait ressembler à ceci :

Terminal

Système d'exploitation :
  Plateforme : darwin
  Architecture : arm64
  Version : Darwin Kernel Version 23.6.0
  Mémoire disponible (MB) : 65536
  Cœurs CPU disponibles : 10
Binaires :
  Node : 20.12.0
  npm : 10.5.0
  Yarn : 1.22.19
  pnpm : 9.6.0
Packages pertinents :
  next : 15.0.0-canary.115 // La dernière version disponible est détectée (15.0.0-canary.115).
  eslint-config-next : 14.2.5
  react : 19.0.0-rc
  react-dom : 19.0.0
  typescript : 5.5.4
Configuration Next.js :
  output : N/A

Les options suivantes sont disponibles pour la commande next info :

Option	Description
`-h` ou `--help`	Affiche toutes les options disponibles
`--verbose`	Collecte des informations supplémentaires pour le débogage.

Options de `next 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 les dépendances requises si ESLint n'est pas déjà configuré dans votre application.

Les options suivantes sont disponibles pour la commande next lint :

Option	Description
`[répertoire]`	Un répertoire de base sur lequel linter l'application. Si non fourni, le répertoire courant sera utilisé.
`-d, --dir, <dirs...>`	Inclut un répertoire, ou des répertoires, pour exécuter ESLint.
`--file, <files...>`	Inclut un fichier, ou des fichiers, pour exécuter ESLint.
`--ext, [exts...]`	Spécifie les extensions de fichiers JavaScript. (par défaut : [".js", ".mjs", ".cjs", ".jsx", ".ts", ".mts", ".cts", ".tsx"])
`-c, --config, <config>`	Utilise ce fichier de configuration, écrasant toutes les autres options de configuration.
`--resolve-plugins-relative-to, <rprt>`	Spécifie un répertoire à partir duquel les plugins doivent être résolus.
`--strict`	Crée un fichier `.eslintrc.json` en utilisant la configuration stricte de Next.js.
`--rulesdir, <rulesdir...>`	Utilise des règles supplémentaires depuis ce(s) répertoire(s).
`--fix`	Corrige automatiquement les problèmes de linting.
`--fix-type <fixType>`	Spécifie les types de corrections à appliquer (par exemple, problem, suggestion, layout).
`--ignore-path <path>`	Spécifie un fichier à ignorer.
`--no-ignore <path>`	Désactive l'option `--ignore-path`.
`--quiet`	Signale uniquement les erreurs.
`--max-warnings [maxWarnings]`	Spécifie le nombre d'avertissements avant de déclencher un code de sortie non nul. (par défaut : -1)
`-o, --output-file, <outputFile>`	Spécifie un fichier dans lequel écrire le rapport.
`-f, --format, <format>`	Utilise un format de sortie spécifique.
`--no-inline-config`	Empêche les commentaires de modifier la configuration ou les règles.
`--report-unused-disable-directives-severity <level>`	Spécifie le niveau de sévérité pour les directives eslint-disable inutilisées. (choix : "error", "off", "warn")
`--no-cache`	Désactive la mise en cache.
`--cache-location, <cacheLocation>`	Spécifie un emplacement pour le cache.
`--cache-strategy, [cacheStrategy]`	Spécifie une stratégie à utiliser pour détecter les fichiers modifiés dans le cache. (par défaut : "metadata")
`--error-on-unmatched-pattern`	Signale des erreurs lorsque des motifs de fichiers ne correspondent pas.
`-h, --help`	Affiche ce message.

Options de `next telemetry`

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 préférez ne pas partager d'informations.

Les options suivantes sont disponibles pour la commande next telemetry :

Option	Description
`-h, --help`	Affiche toutes les options disponibles.
`--enable`	Active la collecte de télémétrie de Next.js.
`--disable`	Désactive la collecte de télémétrie de Next.js.

Apprenez-en plus sur la Télémétrie.

Exemples

Modification du port par défaut

Par défaut, Next.js utilise http://localhost:3000 pendant le développement et avec next start. Le port par défaut peut être modifié avec l'option -p, comme ceci :

Terminal

next dev -p 4000

Ou en utilisant la variable d'environnement PORT :

Terminal

PORT=4000 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.

Utilisation du HTTPS pendant le développement

Pour certains cas d'utilisation comme les webhooks ou l'authentification, vous pouvez utiliser HTTPS pour avoir un environnement sécurisé sur localhost. Next.js peut générer un certificat auto-signé avec next dev en utilisant le flag --experimental-https :

Terminal

next dev --experimental-https

Avec le certificat généré, le serveur de développement Next.js sera accessible à l'adresse https://localhost:3000. Le port par défaut 3000 est utilisé sauf si un port est spécifié avec -p, --port ou PORT.

Vous pouvez également fournir un certificat et une clé personnalisés avec --experimental-https-key et --experimental-https-cert. Optionnellement, vous pouvez aussi fournir un certificat CA personnalisé avec --experimental-https-ca.

Terminal

next dev --experimental-https --experimental-https-key ./certificates/localhost-key.pem --experimental-https-cert ./certificates/localhost.pem

next dev --experimental-https est uniquement destiné au développement et crée un certificat localement approuvé avec mkcert. En production, utilisez des certificats correctement émis par des autorités de confiance.

Configuration d'un délai d'attente pour les proxies en aval

Lors du déploiement de Next.js derrière un proxy en aval (par exemple un répartiteur de charge comme AWS ELB/ALB), il est important de configurer le serveur HTTP sous-jacent de Next avec des délais d'attente keep-alive qui sont supérieurs à ceux du proxy en aval. Sinon, une fois qu'un délai d'attente keep-alive est atteint pour une connexion TCP donnée, Node.js terminera immédiatement cette connexion sans en informer 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 délai d'attente pour le serveur Next.js en production, passez --keepAliveTimeout (en millisecondes) à next start, comme ceci :

Terminal

next start --keepAliveTimeout 70000

Passage d'arguments Node.js

Vous pouvez passer n'importe quel argument Node.js aux commandes next. Par exemple :

Terminal

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

Référence

Commandes

Options de `next dev`

Options de `next build`

Options de `next start`

Options de `next info`

Options de `next lint`

Options de `next telemetry`

Exemples

Modification du port par défaut

Utilisation du HTTPS pendant le développement

Configuration d'un délai d'attente pour les proxies en aval

Passage d'arguments Node.js

On this page