turbopack

Опция turbopack позволяет настраивать Turbopack для преобразования различных файлов и изменения способа разрешения модулей.

import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  turbopack: {
    // ...
  },
}

export default nextConfig

/** @type {import('next').NextConfig} */
const nextConfig = {
  turbopack: {
    // ...
  },
}

module.exports = nextConfig

Полезно знать:

• Turbopack для Next.js не требует загрузчиков (loaders) или их конфигурации для встроенной функциональности. Turbopack имеет встроенную поддержку CSS и компиляции современного JavaScript, поэтому нет необходимости в css-loader, postcss-loader или babel-loader, если вы используете @babel/preset-env.

Справочник

Параметры

Доступны следующие параметры для конфигурации turbo:

Поддерживаемые загрузчики

Следующие загрузчики были протестированы и работают с реализацией загрузчиков webpack в Turbopack, но многие другие загрузчики webpack также могут работать, даже если они не перечислены здесь:

• babel-loader
• @svgr/webpack
• svg-inline-loader
• yaml-loader
• string-replace-loader
• raw-loader
• sass-loader
• graphql-tag/loader

Примеры

Корневая директория

Turbopack использует корневую директорию для разрешения модулей. Файлы вне корня проекта не разрешаются.

Next.js автоматически определяет корневую директорию вашего проекта. Для этого он ищет один из следующих файлов:

• pnpm-lock.yaml
• package-lock.json
• yarn.lock
• bun.lock
• bun.lockb

Если у вас другая структура проекта, например, если вы не используете рабочие пространства (workspaces), вы можете вручную установить параметр root:

const path = require('path')
module.exports = {
  turbopack: {
    root: path.join(__dirname, '..'),
  },
}

Настройка загрузчиков webpack

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

• Реализовано только ядро API загрузчиков webpack. В настоящее время этого достаточно для некоторых популярных загрузчиков, и мы расширим поддержку API в будущем.
• Поддерживаются только загрузчики, возвращающие код JavaScript. Загрузчики, преобразующие файлы, такие как таблицы стилей или изображения, в настоящее время не поддерживаются.
• Параметры, передаваемые загрузчикам webpack, должны быть простыми примитивами JavaScript, объектами и массивами. Например, нельзя передавать модули плагинов через require() в качестве значений параметров.

Для настройки загрузчиков добавьте имена установленных загрузчиков и любые параметры в next.config.js, сопоставляя расширения файлов со списком загрузчиков.

Ниже приведён пример использования загрузчика @svgr/webpack, который позволяет импортировать файлы .svg и отображать их как компоненты React.

module.exports = {
  turbopack: {
    rules: {
      '*.svg': {
        loaders: ['@svgr/webpack'],
        as: '*.js',
      },
    },
  },
}

Для загрузчиков, требующих параметров конфигурации, вы можете использовать объектный формат вместо строки:

module.exports = {
  turbopack: {
    rules: {
      '*.svg': {
        loaders: [
          {
            loader: '@svgr/webpack',
            options: {
              icon: true,
            },
          },
        ],
        as: '*.js',
      },
    },
  },
}

Полезно знать: До версии Next.js 13.4.4 параметр turbo.rules назывался turbo.loaders и принимал только расширения файлов, такие как .mdx, вместо *.mdx.

Разрешение псевдонимов

Turbopack можно настроить для изменения разрешения модулей через псевдонимы, аналогично конфигурации resolve.alias в webpack.

Для настройки псевдонимов сопоставьте импортируемые шаблоны с их новым назначением в next.config.js:

module.exports = {
  turbopack: {
    resolveAlias: {
      underscore: 'lodash',
      mocha: { browser: 'mocha/browser-entry.js' },
    },
  },
}

Это создаёт псевдоним для пакета underscore, указывающий на пакет lodash. Другими словами, import underscore from 'underscore' будет загружать модуль lodash вместо underscore.

Turbopack также поддерживает условное создание псевдонимов через это поле, аналогично условным экспортам в Node.js. На данный момент поддерживается только условие browser. В приведённом выше случае импорты модуля mocha будут перенаправляться на mocha/browser-entry.js, когда Turbopack работает в браузерной среде.

Разрешение пользовательских расширений

Turbopack можно настроить для разрешения модулей с пользовательскими расширениями, аналогично конфигурации resolve.extensions в webpack.

Для настройки разрешения расширений используйте поле resolveExtensions в next.config.js:

module.exports = {
  turbopack: {
    resolveExtensions: ['.mdx', '.tsx', '.ts', '.jsx', '.js', '.mjs', '.json'],
  },
}

Это перезаписывает исходные расширения для разрешения предоставленным списком. Убедитесь, что включили стандартные расширения.

Для получения дополнительной информации и рекомендаций по миграции вашего приложения с webpack на Turbopack см. документацию Turbopack о совместимости с webpack.

История версий