Настройки next.config.js

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

next.config.js
// @ts-check

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

module.exports = nextConfig

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

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

next.config.mjs
// @ts-check

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

export default nextConfig

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

next.config.mjs
// @ts-check

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

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

next.config.js
// @ts-check

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

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

// @ts-check

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 для сжатия рендерингового контента и статических файлов, работает только с серверной сборкой. Подробнее об этом здесь.

crossOrigin

Используйте опцию `crossOrigin` для добавления атрибута crossOrigin в теги `script`, генерируемые `next/script`.

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

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

distDir

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

Переменные окружения (env)

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

ESLint

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

exportPathMap

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

generateBuildId

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

generateEtags

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

Заголовки (headers)

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

httpAgentOptions

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

Изображения

Настройка кастомного загрузчика для next/image

cacheHandler

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

instrumentationHook

Используйте опцию instrumentationHook для настройки инструментирования в вашем Next.js приложении.

Логирование

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

mdxRs

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

onDemandEntries

Настройка управления хранением страниц в памяти в процессе разработки в Next.js.

optimizePackageImports

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

output

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

pageExtensions

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

Частичный предварительный рендеринг (экспериментальная функция)

Узнайте, как включить частичный предварительный рендеринг (экспериментальная функция) в Next.js 14.

poweredByHeader

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

productionBrowserSourceMaps

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

reactStrictMode

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

Перенаправления (redirects)

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

rewrites

Добавление переадресаций (rewrites) в приложение Next.js.

serverActions

Настройка поведения Server Actions в приложении Next.js.

serverComponentsExternalPackages

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

StaleTimes (экспериментальная функция)

Узнайте, как настроить период инвалидации кэша клиентского роутера (Client Router Cache).

trailingSlash

Настройка обработки завершающего слеша в URL-адресах страниц 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.