Next.js CLI

Die Next.js CLI ermöglicht das Starten, Bauen und Exportieren Ihrer Anwendung.

Um eine Liste der verfügbaren CLI-Befehle zu erhalten, führen Sie folgenden Befehl in Ihrem Projektverzeichnis aus:

npx next -h

(npx ist ab npm 5.2+ enthalten)

Die Ausgabe sollte wie folgt aussehen:

Usage
  $ next <command>

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

Options
  --version, -v   Versionsnummer
  --help, -h      Zeigt diese Nachricht an

Für mehr Informationen führen Sie einen Befehl mit dem --help-Flag aus
  $ next build --help

Sie können beliebige Node-Argumente an next-Befehle übergeben:

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

Gut zu wissen: next ohne Befehl auszuführen ist dasselbe wie next dev

Build

next build erstellt eine optimierte Produktionsversion Ihrer Anwendung. Die Ausgabe zeigt Informationen zu jeder Route an.

• Größe – Die Anzahl der Assets, die beim clientseitigen Navigieren zur Seite heruntergeladen werden. Die Größe jeder Route beinhaltet nur ihre Abhängigkeiten.
• First Load JS – Die Anzahl der Assets, die beim Besuch der Seite vom Server heruntergeladen werden. Die Menge an JS, die von allen geteilt wird, wird als separate Metrik angezeigt.

Beide Werte sind mit gzip komprimiert. Der First Load wird durch grün, gelb oder rot angezeigt. Streben Sie grün für performante Anwendungen an.

Sie können die Produktionsprofilerstellung für React mit dem --profile-Flag in next build aktivieren. Dies erfordert Next.js 9.5:

next build --profile

Danach können Sie den Profiler genauso verwenden wie in der Entwicklung.

Sie können eine ausführlichere Build-Ausgabe mit dem --debug-Flag in next build aktivieren. Dies erfordert Next.js 9.5.3:

next build --debug

Mit diesem Flag werden zusätzliche Build-Informationen wie Rewrites, Redirects und Header angezeigt.

Entwicklung

next dev startet die Anwendung im Entwicklungsmodus mit Hot-Code-Reloading, Fehlerberichterstattung und mehr:

Die Anwendung startet standardmäßig unter http://localhost:3000. Der Standardport kann mit -p geändert werden, wie folgt:

npx next dev -p 4000

Oder über die PORT-Umgebungsvariable:

PORT=4000 npx next dev

Gut zu wissen: PORT kann nicht in .env gesetzt werden, da der HTTP-Server startet, bevor anderer Code initialisiert wird.

Sie können auch den Hostnamen vom Standardwert 0.0.0.0 ändern, was nützlich sein kann, um die Anwendung für andere Geräte im Netzwerk verfügbar zu machen. Der Standard-Hostname kann mit -H geändert werden, wie folgt:

npx next dev -H 192.168.1.2

Produktion

next start startet die Anwendung im Produktionsmodus. Die Anwendung sollte zuerst mit next build kompiliert werden.

Die Anwendung startet standardmäßig unter http://localhost:3000. Der Standardport kann mit -p geändert werden, wie folgt:

npx next start -p 4000

Oder über die PORT-Umgebungsvariable:

PORT=4000 npx next start

Gut zu wissen:

• PORT kann nicht in .env gesetzt werden, da der HTTP-Server startet, bevor anderer Code initialisiert wird.

• next start kann nicht mit output: 'standalone' oder output: 'export' verwendet werden.

Keep-Alive-Timeout

Wenn Next.js hinter einem Downstream-Proxy (z.B. einem Load-Balancer wie AWS ELB/ALB) bereitgestellt wird, ist es wichtig, den zugrundeliegenden HTTP-Server von Next mit Keep-Alive-Timeouts zu konfigurieren, die größer sind als die Timeouts des Downstream-Proxys. Andernfalls wird Node.js eine TCP-Verbindung sofort beenden, sobald das Keep-Alive-Timeout erreicht ist, ohne den Downstream-Proxy zu benachrichtigen. Dies führt zu einem Proxy-Fehler, wenn versucht wird, eine Verbindung wiederzuverwenden, die Node.js bereits beendet hat.

Um die Timeout-Werte für den Next.js-Produktionsserver zu konfigurieren, übergeben Sie --keepAliveTimeout (in Millisekunden) an next start, wie folgt:

npx next start --keepAliveTimeout 70000

Lint

next lint führt ESLint für alle Dateien in den Verzeichnissen pages/, app/, components/, lib/ und src/ aus. Es bietet auch eine geführte Einrichtung, um alle erforderlichen Abhängigkeiten zu installieren, falls ESLint noch nicht in Ihrer Anwendung konfiguriert ist.

Wenn Sie andere Verzeichnisse linten möchten, können Sie diese mit dem --dir-Flag angeben:

next lint --dir utils

Telemetrie

Next.js sammelt vollständig anonyme Telemetriedaten über die allgemeine Nutzung. Die Teilnahme an diesem anonymen Programm ist optional, und Sie können sich abmelden, wenn Sie keine Informationen teilen möchten.

Um mehr über Telemetrie zu erfahren, lesen Sie bitte dieses Dokument.

Next Info

next info gibt relevante Details über das aktuelle System aus, die zur Meldung von Next.js-Fehlern verwendet werden können. Diese Informationen umfassen Betriebssystemplattform/Architektur/Version, Binärdateien (Node.js, npm, Yarn, pnpm) und npm-Paketversionen (next, react, react-dom).

Die Ausführung des folgenden Befehls im Stammverzeichnis Ihres Projekts:

next info

liefert Informationen wie in diesem Beispiel:

Operating System:
  Platform: linux
  Arch: x64
  Version: #22-Ubuntu SMP Fri Nov 5 13:21:36 UTC 2021
Binaries:
  Node: 16.13.0
  npm: 8.1.0
  Yarn: 1.22.17
  pnpm: 6.24.2
Relevant packages:
  next: 12.0.8
  react: 17.0.2
  react-dom: 17.0.2

Diese Informationen sollten dann in GitHub Issues eingefügt werden.

Um Installationsprobleme zu diagnostizieren, können Sie next info --verbose ausführen, um zusätzliche Informationen über das System und die Installation von next-bezogenen Paketen auszugeben.