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. Seit 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 dadurch die Notwendigkeit für das veraltete serverless-Target, 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 im .next-Ausgabeverzeichnis erzeugt werden, zu nutzen, können Sie die Liste der Dateien in jeder Trace lesen, die relativ zur .nft.json-Datei stehen, und sie dann an Ihren Bereitstellungsort kopieren.

Automatisches Kopieren der verfolgten 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 diese automatische Kopierfunktion zu nutzen, können Sie sie 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 verwaltet 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.

Wissenswert:

• next.config.js wird während next build gelesen und in die server.js-Ausgabedatei serialisiert. Wenn die veralteten Optionen serverRuntimeConfig oder publicRuntimeConfig verwendet werden, sind die Werte spezifisch für die Werte zum Build-Zeitpunkt.
• 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. Zum Beispiel: PORT=8080 HOSTNAME=0.0.0.0 node server.js, um den Server unter http://0.0.0.0:8080 zu starten.
• Wenn Ihr Projekt Image Optimization mit dem Standard-loader verwendet, müssen Sie sharp als Abhängigkeit installieren:

npm i sharp

yarn add sharp

pnpm add sharp

bun add sharp

Einschränkungen

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

module.exports = {
  experimental: {
    // 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 erforderliche Dateien nicht einbezieht oder ungenutzte Dateien fälschlicherweise einbezieht. In diesen Fällen können Sie experimental.outputFileTracingExcludes bzw. experimental.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 Projektstamm, die entweder in die Verfolgung ein- oder ausgeschlossen werden sollen.

module.exports = {
  experimental: {
    outputFileTracingExcludes: {
      '/api/hello': ['./un-necessary-folder/**/*'],
    },
    outputFileTracingIncludes: {
      '/api/another': ['./necessary-folder/**/*'],
    },
  },
}

• Derzeit macht Next.js nichts mit den erzeugten .nft.json-Dateien. Die Dateien müssen von Ihrer Bereitstellungsplattform, z.B. Vercel, gelesen werden, um eine minimale Bereitstellung zu erstellen. In einer zukünftigen Version ist ein neuer Befehl geplant, der diese .nft.json-Dateien nutzt.

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 erstellt.

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

module.exports = {
  experimental: {
    turbotrace: {
      // steuert die Protokollebene des turbotrace, Standard ist `error`
      logLevel?:
      | 'bug'
      | 'fatal'
      | 'error'
      | 'warning'
      | 'hint'
      | 'note'
      | 'suggestions'
      | 'info',
      // steuert, ob das Protokoll des turbotrace Details der Analyse enthalten soll, Standard ist `false`
      logDetail?: boolean
      // zeigt alle Protokollmeldungen ohne Limit an
      // turbotrace zeigt standardmäßig nur 1 Protokollmeldung pro Kategorie an
      logAll?: boolean
      // steuert das Kontextverzeichnis des turbotrace
      // Dateien außerhalb des Kontextverzeichnisses werden nicht verfolgt
      // das Setzen von `experimental.outputFileTracingRoot` hat denselben Effekt
      // wenn sowohl `experimental.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 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 des `turbotrace`, in `MB`, Standard ist `6000`.
      memoryLimit?: number
    },
  },
}