CLI next
La CLI Next.js vous permet de développer, construire, démarrer votre application et plus encore.
Utilisation basique :
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 pournext 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 :
- 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. |
Options de next info
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 :
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 :
Ou en utilisant la variable d'environnement PORT
:
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
:
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
.
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 :
Passage d'arguments Node.js
Vous pouvez passer n'importe quel argument Node.js aux commandes next
. Par exemple :