Опции next.config.js

Next.js можно настроить через файл next.config.js в корневой директории вашего проекта (например, рядом с package.json).

next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  /* параметры конфигурации здесь */
}

module.exports = nextConfig

next.config.js — это обычный модуль Node.js, а не JSON-файл. Он используется сервером Next.js на этапах сборки и не включается в сборку для браузера.

Если вам нужны модули ECMAScript, вы можете использовать next.config.mjs:

next.config.mjs
/**
 * @type {import('next').NextConfig}
 */
const nextConfig = {
  /* параметры конфигурации здесь */
}

export default nextConfig

Вы также можете использовать функцию:

next.config.mjs
module.exports = (phase, { defaultConfig }) => {
  /**
   * @type {import('next').NextConfig}
   */
  const nextConfig = {
    /* параметры конфигурации здесь */
  }
  return nextConfig
}

Начиная с Next.js 12.1.0, можно использовать асинхронную функцию:

next.config.js
module.exports = async (phase, { defaultConfig }) => {
  /**
   * @type {import('next').NextConfig}
   */
  const nextConfig = {
    /* параметры конфигурации здесь */
  }
  return nextConfig
}

phase — это текущий контекст, в котором загружается конфигурация. Вы можете увидеть доступные фазы. Фазы можно импортировать из next/constants:

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

module.exports = (phase, { defaultConfig }) => {
  if (phase === PHASE_DEVELOPMENT_SERVER) {
    return {
      /* параметры конфигурации только для разработки */
    }
  }

  return {
    /* параметры конфигурации для всех фаз, кроме разработки */
  }
}

Закомментированные строки — это место, куда можно поместить параметры конфигурации, разрешённые в next.config.js, которые определены в этом файле.

Однако ни один из параметров не является обязательным, и нет необходимости понимать, что делает каждый из них. Вместо этого найдите в этом разделе функции, которые вам нужно включить или изменить, и они покажут вам, что делать.

Избегайте использования новых возможностей JavaScript, недоступных в вашей целевой версии Node.js. next.config.js не будет обрабатываться Webpack, Babel или TypeScript.

На этой странице описаны все доступные параметры конфигурации:

appDir

Включите маршрутизатор приложений (App Router) для использования макетов, потоковой передачи и других возможностей.

assetPrefix

Узнайте, как использовать опцию конфигурации assetPrefix для настройки CDN.

basePath

Использование `basePath` для развертывания приложения Next.js в подкаталоге домена.

Сжатие (compress)

Next.js предоставляет сжатие gzip для сжатия рендеренного контента и статических файлов, работает только с серверной сборкой. Подробнее об этом здесь.

Индикаторы разработки (devIndicators)

Оптимизированные страницы включают индикатор, показывающий, применяется ли к ним статическая оптимизация. Здесь можно отключить этот индикатор.

distDir

Настройка пользовательской директории сборки вместо стандартной папки .next.

env

Узнайте, как добавлять и использовать переменные окружения в приложении Next.js во время сборки.

ESLint

Next.js по умолчанию сообщает об ошибках и предупреждениях ESLint во время сборки. Узнайте, как отключить это поведение.

exportPathMap

Настройка страниц, которые будут экспортированы как HTML-файлы при использовании `next export`.

generateBuildId

Настройка идентификатора сборки, который используется для определения текущей версии приложения.

generateEtags

Next.js по умолчанию генерирует etags для каждой страницы. Узнайте, как отключить генерацию etags.

Заголовки

Добавление пользовательских HTTP-заголовков в приложение Next.js.

httpAgentOptions

Next.js по умолчанию автоматически использует HTTP Keep-Alive. Узнайте, как отключить HTTP Keep-Alive.

Изображения

Пользовательская конфигурация для загрузчика next/image

incrementalCacheHandlerPath

Настройка кэша Next.js, используемого для хранения и ревалидации данных.

mdxRs

Использование нового компилятора Rust для компиляции MDX-файлов в App Router.

onDemandEntries

Настройка управления памятью страниц в режиме разработки в Next.js. Узнайте, как сервер освобождает или сохраняет в памяти созданные страницы.

optimizePackageImports

Справочник API для опции конфигурации Next.js optimizePackageImports

output

Next.js автоматически определяет, какие файлы нужны каждой странице для упрощения развертывания приложения. Узнайте, как это работает.

pageExtensions

Расширение стандартных расширений файлов страниц, используемых Next.js при разрешении страниц в Pages Router.

poweredByHeader

Next.js по умолчанию добавляет заголовок `x-powered-by`. Узнайте, как отключить его.

productionBrowserSourceMaps

Включает генерацию source maps для браузера во время production-сборки.

reactStrictMode

Полная среда выполнения Next.js теперь совместима со строгим режимом React. Узнайте, как его включить

redirects

Добавление редиректов в ваше Next.js приложение.

rewrites

Добавление правил перезаписи URL в ваше приложение Next.js.

serverComponentsExternalPackages

Исключение определенных зависимостей из бандлинга серверных компонентов и использование нативного Node.js `require`.

trailingSlash

Настройка обработки страниц Next.js с завершающим слешем или без него.

transpilePackages

Автоматическая транспиляция и сборка зависимостей из локальных пакетов (например, монорепозиториев) или внешних зависимостей (`node_modules`). Заменяет пакет `next-transpile-modules`.

turbo

Настройка Next.js с параметрами, специфичными для Turbopack

typedRoutes

Включение экспериментальной поддержки статически типизированных ссылок.

TypeScript

Next.js по умолчанию сообщает об ошибках TypeScript. Узнайте, как отключить эту функцию.

Импорт по URL (urlImports)

Настройка Next.js для разрешения импорта модулей из внешних URL (экспериментальная функция).

webpack

Узнайте, как настроить конфигурацию webpack, используемую в Next.js

webVitalsAttribution

Узнайте, как использовать опцию webVitalsAttribution для определения источника проблем с Web Vitals.