Output

Während eines Builds verfolgt Next.js automatisch jede Seite und ihre Abhängigkeiten, um alle Dateien zu bestimmen, die für die Bereitstellung einer Produktionsversion Ihrer Anwendung benötigt werden.

Diese Funktion hilft, die Größe der Bereitstellungen drastisch zu reduzieren. Früher mussten Sie beim Bereitstellen mit Docker alle Dateien aus den dependencies Ihres Pakets installiert haben, um next start auszuführen. Ab Next.js 12 können Sie die Output File Tracing-Funktion im .next/-Verzeichnis nutzen, um nur die notwendigen Dateien einzubeziehen.

Darüber hinaus entfällt die Notwendigkeit für das veraltete serverless-Ziel, das verschiedene Probleme verursachen und unnötige Duplizierung erzeugen kann.

Funktionsweise

Während next build verwendet Next.js @vercel/nft, um import, require und fs-Verwendung statisch zu analysieren und alle Dateien zu bestimmen, die eine Seite möglicherweise lädt.

Der Produktionsserver von Next.js wird ebenfalls auf seine benötigten Dateien hin verfolgt und unter .next/next-server.js.nft.json ausgegeben, was in der Produktion genutzt werden kann.

Um die .nft.json-Dateien, die in das .next-Ausgabeverzeichnis ausgegeben werden, zu nutzen, können Sie die Liste der Dateien in jeder Trace lesen, die relativ zur .nft.json-Datei sind, und sie dann an Ihren Bereitstellungsort kopieren.

Automatisches Kopieren verfolgter Dateien

Next.js kann automatisch einen standalone-Ordner erstellen, der nur die notwendigen Dateien für eine Produktionsbereitstellung kopiert, einschließlich ausgewählter Dateien in node_modules.

Um dieses automatische Kopieren zu nutzen, können Sie es in Ihrer next.config.js aktivieren:

module.exports = {
  output: 'standalone',
}

Dadurch wird ein Ordner unter .next/standalone erstellt, der dann ohne Installation von node_modules bereitgestellt werden kann.

Zusätzlich wird eine minimale server.js-Datei ausgegeben, die anstelle von next start verwendet werden kann. Dieser minimale Server kopiert standardmäßig nicht die public- oder .next/static-Ordner, da diese idealerweise von einem CDN gehandhabt werden sollten, obwohl diese Ordner manuell in die standalone/public- und standalone/.next/static-Ordner kopiert werden können, wonach die server.js-Datei diese automatisch bereitstellt.

Um diese manuell zu kopieren, können Sie das cp-Kommandozeilentool nach next build verwenden:

cp -r public .next/standalone/ && cp -r .next/static .next/standalone/.next/

Um Ihre minimale server.js-Datei lokal zu starten, führen Sie den folgenden Befehl aus:

node .next/standalone/server.js

Wissenswert:

• Wenn Ihr Projekt auf einen bestimmten Port oder Hostnamen hören muss, können Sie die Umgebungsvariablen PORT oder HOSTNAME definieren, bevor Sie server.js ausführen. Führen Sie beispielsweise PORT=8080 HOSTNAME=0.0.0.0 node server.js aus, um den Server unter http://0.0.0.0:8080 zu starten.

Einschränkungen

• Beim Tracing in Monorepo-Setups wird standardmäßig das Projektverzeichnis für das Tracing verwendet. Für next build packages/web-app wäre packages/web-app das Tracing-Root, und Dateien außerhalb dieses Ordners werden nicht einbezogen. Um Dateien außerhalb dieses Ordners einzubeziehen, können Sie outputFileTracingRoot in Ihrer next.config.js festlegen.

module.exports = {
  // dies bezieht Dateien aus der Monorepo-Basis zwei Verzeichnisse höher ein
  outputFileTracingRoot: path.join(__dirname, '../../'),
}

• Es gibt einige Fälle, in denen Next.js möglicherweise benötigte Dateien nicht einbezieht oder ungenutzte Dateien fälschlicherweise einbezieht. In diesen Fällen können Sie outputFileTracingExcludes und outputFileTracingIncludes in next.config.js nutzen. Jede Konfiguration akzeptiert ein Objekt mit minimatch-Globs für den Schlüssel, um bestimmte Seiten abzugleichen, und einen Wert eines Arrays mit Globs relativ zum Projekt-Root, die entweder in die Trace ein- oder ausgeschlossen werden sollen.

module.exports = {
  outputFileTracingExcludes: {
    '/api/hello': ['./un-necessary-folder/**/*'],
  },
  outputFileTracingIncludes: {
    '/api/another': ['./necessary-folder/**/*'],
    '/api/login/\\[\\[\\.\\.\\.slug\\]\\]': [
      './node_modules/aws-crt/dist/bin/**/*',
    ],
  },
}

Hinweis: Der Schlüssel von outputFileTracingIncludes/outputFileTracingExcludes ist eine Glob, daher müssen Sonderzeichen maskiert werden.

Experimentelles turbotrace

Das Tracing von Abhängigkeiten kann langsam sein, da es sehr komplexe Berechnungen und Analysen erfordert. Wir haben turbotrace in Rust als eine schnellere und intelligentere Alternative zur JavaScript-Implementierung erstellt.

Um es zu aktivieren, können Sie Ihrer next.config.js die folgende Konfiguration hinzufügen:

module.exports = {
  experimental: {
    turbotrace: {
      // steuert das Log-Level des turbotrace, Standard ist `error`
      logLevel?:
      | 'bug'
      | 'fatal'
      | 'error'
      | 'warning'
      | 'hint'
      | 'note'
      | 'suggestions'
      | 'info',
      // steuert, ob das Log von turbotrace die Details der Analyse enthalten soll, Standard ist `false`
      logDetail?: boolean
      // zeigt alle Log-Nachrichten ohne Limit an
      // turbotrace zeigt standardmäßig nur 1 Log-Nachricht pro Kategorie an
      logAll?: boolean
      // steuert das Kontextverzeichnis des turbotrace
      // Dateien außerhalb des Kontextverzeichnisses werden nicht getraced
      // das Setzen von `outputFileTracingRoot` hat den gleichen Effekt
      // wenn sowohl `outputFileTracingRoot` als auch diese Option gesetzt sind, wird `experimental.turbotrace.contextDirectory` verwendet
      contextDirectory?: string
      // wenn es in Ihrem Code einen `process.cwd()`-Ausdruck gibt, können Sie diese Option setzen, um `turbotrace` den Wert von `process.cwd()` während des Tracings mitzuteilen.
      // zum Beispiel wird require(process.cwd() + '/package.json') als require('/path/to/cwd/package.json') getraced
      processCwd?: string
      // steuert die maximale Speichernutzung des `turbotrace`, in `MB`, Standard ist `6000`.
      memoryLimit?: number
    },
  },
}