Menu

Ausgabe

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

Diese Funktion hilft, die Größe von Bereitstellungen drastisch zu reduzieren. Früher mussten Sie bei der Bereitstellung mit Docker alle Dateien aus den dependencies Ihres Pakets installieren, um next start auszuführen. Ab Next.js 12 können Sie die Ausgabedateiverfolgung im .next/-Verzeichnis nutzen, um nur die notwendigen Dateien einzuschließen.

Darüber hinaus entfällt die Notwendigkeit des veralteten serverless-Ziels, das verschiedene Probleme verursachen und unnötige Duplizierungen erzeugen kann.

Funktionsweise

Während next build verwendet Next.js @vercel/nft, um statisch import, require und fs-Nutzung 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 verfolgt und unter .next/next-server.js.nft.json ausgegeben, was in der Produktion genutzt werden kann.

Um die .nft.json-Dateien zu nutzen, die im .next-Ausgabeverzeichnis ausgegeben werden, können Sie die Liste der Dateien in jeder Verfolgung 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:

next.config.js
module.exports = {
  output: 'standalone',
}

Dies erstellt einen Ordner unter .next/standalone, 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 Ordner public oder .next/static, da diese idealerweise von einem CDN behandelt werden sollten, obwohl diese Ordner manuell in die Ordner standalone/public und standalone/.next/static kopiert werden können, wonach die server.js-Datei diese automatisch bereitstellen wird.

Hinweis:

  • Wenn Ihr Projekt einen bestimmten Port oder Hostnamen benötigt, können Sie die Umgebungsvariablen PORT oder HOSTNAME vor dem Ausführen von server.js definieren. Beispielsweise führen Sie PORT=8080 HOSTNAME=0.0.0.0 node server.js aus, um den Server auf http://0.0.0.0:8080 zu starten.

Vorbehalte

  • Bei der Verfolgung in Monorepo-Setups wird standardmäßig das Projektverzeichnis zur Verfolgung verwendet. Für next build packages/web-app wäre packages/web-app die Verfolgungswurzel, 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.
packages/web-app/next.config.js
module.exports = {
  // dies schließt Dateien aus dem Monorepo-Basis zwei Verzeichnisse nach oben ein
  outputFileTracingRoot: path.join(__dirname, '../../'),
}
  • Es gibt Fälle, in denen Next.js möglicherweise erforderliche Dateien nicht einschließt oder fälschlicherweise nicht genutzte Dateien einbezieht. In diesen Fällen können Sie outputFileTracingExcludes und outputFileTracingIncludes in next.config.js nutzen. Jede Konfiguration akzeptiert ein Objekt mit minimatch-Globs als Schlüssel zum Abgleichen bestimmter Seiten und einem Wert eines Arrays mit Globs relativ zur Projektwurzel zum Ein- oder Ausschließen in der Verfolgung.
next.config.js
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 ein Glob, daher müssen Sonderzeichen maskiert werden.

  • Derzeit unternimmt Next.js nichts mit den ausgegebenen .nft.json-Dateien. Die Dateien müssen von Ihrer Bereitstellungsplattform, z.B. Vercel, gelesen werden, um eine minimale Bereitstellung zu erstellen. In einem zukünftigen Release ist ein neuer Befehl geplant, um diese .nft.json-Dateien zu nutzen.

Experimentelles turbotrace

Die Verfolgung von Abhängigkeiten kann langsam sein, da sie sehr komplexe Berechnungen und Analysen erfordert. Wir haben turbotrace in Rust als schnellere und intelligentere Alternative zur JavaScript-Implementierung entwickelt.

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

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