next.config.js Optionen

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

// @ts-check
 
/** @type {import('next').NextConfig} */
const nextConfig = {
  /* Konfigurationsoptionen hier */
}
 
module.exports = nextConfig

ECMAScript-Module

next.config.js ist ein reguläres Node.js-Modul und keine JSON-Datei. Es wird vom Next.js-Server und den Build-Phasen verwendet und nicht in den Browser-Build einbezogen.

Wenn 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

Hinweis: next.config mit den Erweiterungen .cjs, .cts oder .mts werden derzeit nicht unterstützt.

Konfiguration als Funktion

Sie können auch eine Funktion verwenden:

// @ts-check
 
export default (phase, { defaultConfig }) => {
  /**
   * @type {import('next').NextConfig}
   */
  const nextConfig = {
    /* Konfigurationsoptionen hier */
  }
  return nextConfig
}

Asynchrone Konfiguration

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

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 {
      /* Konfigurationsoptionen nur für Entwicklung hier */
    }
  }
 
  return {
    /* Konfigurationsoptionen für alle Phasen außer Entwicklung hier */
  }
}

TypeScript

Diese Funktion ist ab der Canary-Version von Next.js verfügbar.

Wenn Sie TypeScript in Ihrem Projekt verwenden, können Sie next.config.ts nutzen, um TypeScript in Ihrer Konfiguration zu verwenden:

import type { NextConfig } from 'next'
 
const nextConfig: NextConfig = {
  /* Konfigurationsoptionen hier */
}
 
export default nextConfig

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

Allerdings sind keine Konfigurationen erforderlich, und es ist nicht notwendig, zu verstehen, was jede Konfiguration bewirkt. Suchen Sie stattdessen 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 oder Babel geparst.

Diese Seite dokumentiert alle verfügbaren Konfigurationsoptionen: