next.config.js Optionen

Next.js kann über eine next.config.js-Datei im Stammverzeichnis Ihres Projekts konfiguriert werden (zum Beispiel neben package.json).

next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  /* Konfigurationsoptionen hier */
}

module.exports = nextConfig

next.config.js ist ein reguläres Node.js-Modul, keine JSON-Datei. Es wird von der Next.js-Server- und Build-Phase verwendet und ist nicht im Browser-Build enthalten.

Falls Sie ECMAScript-Module benötigen, können Sie next.config.mjs verwenden:

next.config.mjs
/**
 * @type {import('next').NextConfig}
 */
const nextConfig = {
  /* Konfigurationsoptionen hier */
}

export default nextConfig

Sie können auch eine Funktion verwenden:

next.config.mjs
module.exports = (phase, { defaultConfig }) => {
  /**
   * @type {import('next').NextConfig}
   */
  const nextConfig = {
    /* Konfigurationsoptionen hier */
  }
  return nextConfig
}

Seit Next.js 12.1.0 können Sie eine asynchrone Funktion verwenden:

next.config.js
module.exports = async (phase, { defaultConfig }) => {
  /**
   * @type {import('next').NextConfig}
   */
  const nextConfig = {
    /* Konfigurationsoptionen hier */
  }
  return nextConfig
}

phase ist der aktuelle Kontext, in dem die Konfiguration geladen wird. Sie können die verfügbaren Phasen einsehen. Phasen können aus next/constants importiert werden:

const { PHASE_DEVELOPMENT_SERVER } = require('next/constants')

module.exports = (phase, { defaultConfig }) => {
  if (phase === PHASE_DEVELOPMENT_SERVER) {
    return {
      /* Nur für die Entwicklung gültige Konfigurationsoptionen hier */
    }
  }

  return {
    /* Konfigurationsoptionen für alle Phasen außer Entwicklung hier */
  }
}

Die kommentierten Zeilen sind der Platz, an dem Sie die von next.config.js erlaubten Konfigurationen einfügen können, die in dieser Datei definiert sind.

Allerdings ist keine der Konfigurationen erforderlich, und es ist nicht notwendig zu verstehen, was jede Konfiguration bewirkt. Stattdessen können Sie nach den Funktionen suchen, die Sie aktivieren oder ändern möchten, und dieser Abschnitt zeigt Ihnen, was zu tun ist.

Vermeiden Sie die Verwendung neuer JavaScript-Funktionen, die in Ihrer Ziel-Node.js-Version nicht verfügbar sind. next.config.js wird nicht von Webpack, Babel oder TypeScript geparst.

Diese Seite dokumentiert alle verfügbaren Konfigurationsoptionen:

appDir

Aktivieren des App Routers für Layouts, Streaming und mehr.

assetPrefix

Erfahren Sie, wie Sie die assetPrefix-Konfigurationsoption zur Einrichtung Ihres CDN verwenden.

basePath

Verwenden Sie `basePath`, um eine Next.js-Anwendung unter einem Unterpfad einer Domain bereitzustellen.

Komprimierung

Next.js bietet Gzip-Komprimierung für gerenderte Inhalte und statische Dateien, die nur mit dem Server-Target funktioniert. Erfahren Sie hier mehr darüber.

devIndicators

Optimierte Seiten zeigen einen Indikator an, der anzeigt, ob sie statisch optimiert werden. Hier können Sie ihn deaktivieren.

distDir

Legen Sie ein benutzerdefiniertes Build-Verzeichnis fest, das anstelle des standardmäßigen .next-Verzeichnisses verwendet wird.

env

Erfahren Sie, wie Sie Umgebungsvariablen in Ihrer Next.js-Anwendung zur Build-Zeit hinzufügen und darauf zugreifen.

ESLint

Next.js meldet standardmäßig ESLint-Fehler und Warnungen während des Builds. Hier erfahren Sie, wie Sie dieses Verhalten deaktivieren können.

exportPathMap

Anpassung der Seiten, die beim Verwenden von `next export` als HTML-Dateien exportiert werden.

generateBuildId

Konfigurieren der Build-ID, die zur Identifizierung des aktuellen Builds verwendet wird, in dem Ihre Anwendung bereitgestellt wird.

generateEtags

Next.js generiert standardmäßig ETags für jede Seite. Erfahren Sie hier mehr über das Deaktivieren der ETag-Generierung.

headers

Fügen Sie Ihren Next.js-Apps benutzerdefinierte HTTP-Header hinzu.

httpAgentOptions

Next.js verwendet standardmäßig automatisch HTTP Keep-Alive. Erfahren Sie hier, wie Sie HTTP Keep-Alive deaktivieren können.

Bilder

Benutzerdefinierte Konfiguration für den `next/image`-Loader

incrementalCacheHandlerPath

Konfiguration des Next.js-Caches für die Speicherung und Revalidierung von Daten.

mdxRs

Verwendung des neuen Rust-Compilers zur Kompilierung von MDX-Dateien im App-Router.

onDemandEntries

Konfigurieren Sie, wie Next.js in der Entwicklung erstellte Seiten verwaltet und im Speicher behält.

optimizePackageImports

API-Referenz für die Next.js-Konfigurationsoption `experimental.optimizePackageImports`

Output

Next.js verfolgt automatisch, welche Dateien für jede Seite benötigt werden, um die Bereitstellung Ihrer Anwendung zu vereinfachen. Erfahren Sie hier, wie es funktioniert.

pageExtensions

Erweitern der standardmäßigen Seitenerweiterungen, die Next.js bei der Auflösung von Seiten im Pages Router verwendet.

poweredByHeader

Next.js fügt standardmäßig den Header `x-powered-by` hinzu. Hier erfahren Sie, wie Sie dies deaktivieren können.

productionBrowserSourceMaps

Aktiviert die Generierung von Browser-Source-Maps während des Produktions-Builds.

reactStrictMode

Die komplette Next.js-Laufzeitumgebung ist jetzt Strict Mode-kompatibel. Erfahren Sie, wie Sie sich aktiv dafür entscheiden können

Weiterleitungen (Redirects)

Weiterleitungen zu Ihrer Next.js-Anwendung hinzufügen.

rewrites

Rewrites für Ihre Next.js-Anwendung hinzufügen.

serverComponentsExternalPackages

Bestimmte Abhängigkeiten vom Server Components-Bundling ausschließen und native Node.js-`require` verwenden.

trailingSlash

Konfiguration von Next.js-Seiten mit oder ohne nachgestellten Schrägstrich.

transpilePackages

Automatisches Transpilieren und Bündeln von Abhängigkeiten aus lokalen Paketen (wie Monorepos) oder externen Abhängigkeiten (`node_modules`).

turbo

Konfiguration von Next.js mit Turbopack-spezifischen Optionen

typedRoutes

Experimentelle Unterstützung für statisch typisierte Links.

TypeScript

Next.js meldet TypeScript-Fehler standardmäßig. Hier erfahren Sie, wie Sie dieses Verhalten deaktivieren können.

URL-Imports

Konfigurieren Sie Next.js, um das Importieren von Modulen von externen URLs zu ermöglichen (experimentell).

webpack

Erfahren Sie, wie Sie die von Next.js verwendete webpack-Konfiguration anpassen

webVitalsAttribution

Erfahren Sie, wie Sie die Option webVitalsAttribution verwenden, um die Ursache von Web Vitals-Problemen zu identifizieren.