next.config.js Optionen

Next.js kann über eine next.config.js-Datei im Stammverzeichnis Ihres Projektordners (zum Beispiel neben package.json) mit einem Standard-Export konfiguriert werden.

// @ts-check

/** @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:

// @ts-check

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

export default nextConfig

Sie können auch eine Funktion verwenden:

// @ts-check

export default (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:

// @ts-check

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:

// @ts-check

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.

Es sind jedoch keine Konfigurationen erforderlich, und es ist nicht notwendig zu verstehen, was jede Konfiguration bewirkt. Suchen Sie stattdessen in diesem Abschnitt nach den Funktionen, die Sie aktivieren oder ändern möchten, und sie werden Ihnen zeigen, 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: