Компилятор Next.js

Компилятор Next.js, написанный на Rust с использованием SWC, позволяет Next.js преобразовывать и минимизировать ваш JavaScript-код для производства. Он заменяет Babel для отдельных файлов и Terser для минимизации выходных пакетов.

Компиляция с использованием компилятора Next.js в 17 раз быстрее, чем с Babel, и включена по умолчанию начиная с версии Next.js 12. Если у вас есть существующая конфигурация Babel или вы используете неподдерживаемые функции, ваше приложение откажется от использования компилятора Next.js и продолжит использовать Babel.

Почему SWC?

SWC — это расширяемая платформа на Rust для следующего поколения быстрых инструментов разработки.

SWC может использоваться для компиляции, минимизации, пакетирования и многое другое — и разработан для расширения. Вы можете вызывать его для выполнения преобразований кода (как встроенных, так и пользовательских). Выполнение этих преобразований происходит через инструменты более высокого уровня, такие как Next.js.

Мы выбрали SWC по нескольким причинам:

• Расширяемость: SWC может использоваться как Crate внутри Next.js, без необходимости создавать форк библиотеки или обходить ограничения дизайна.
• Производительность: Нам удалось достичь примерно в 3 раза более быстрого Fast Refresh и в 5 раз более быстрых сборки в Next.js, переключившись на SWC, с возможностью дальнейшей оптимизации.
• WebAssembly: Поддержка WASM в Rust необходима для поддержки всех возможных платформ и переноса разработки Next.js на любые платформы.
• Сообщество: Сообщество и экосистема Rust потрясающие и постоянно растут.

Поддерживаемые функции

Styled Components

Мы работаем над переносом babel-plugin-styled-components в компилятор Next.js.

Вначале обновите до последней версии Next.js: npm install next@latest. Затем обновите ваш файл next.config.js:

module.exports = {
  compiler: {
    styledComponents: true,
  },
}

Для сложных случаев вы можете настроить отдельные свойства для компиляции styled-components.

Примечание: minify, transpileTemplateLiterals и pure ещё не реализованы. Вы можете отслеживать прогресс здесь. ssr и displayName преобразования являются основными требованиями для использования styled-components в Next.js.

module.exports = {
  compiler: {
    // see https://styled-components.com/docs/tooling#babel-plugin for more info on the options.
    styledComponents: {
      // Enabled by default in development, disabled in production to reduce file size,
      // setting this will override the default for all environments.
      displayName?: boolean,
      // Enabled by default.
      ssr?: boolean,
      // Enabled by default.
      fileName?: boolean,
      // Empty by default.
      topLevelImportPaths?: string[],
      // Defaults to ["index"].
      meaninglessFileNames?: string[],
      // Enabled by default.
      cssProp?: boolean,
      // Empty by default.
      namespace?: string,
      // Not supported yet.
      minify?: boolean,
      // Not supported yet.
      transpileTemplateLiterals?: boolean,
      // Not supported yet.
      pure?: boolean,
    },
  },
}

Jest

Компилятор Next.js транспилирует ваши тесты и упрощает конфигурацию Jest вместе с Next.js, включая:

• Автоматическое создание mocks для .css, .module.css (и их .scss вариантов) и импортов изображений
• Автоматическая настройка transform с использованием SWC
• Загрузка .env (и всех вариантов) в process.env
• Игнорирование node_modules из разрешения тестов и преобразований
• Игнорирование .next из разрешения тестов
• Загрузка next.config.js для флагов, которые включают экспериментальные преобразования SWC

Вначале обновите до последней версии Next.js: npm install next@latest. Затем обновите ваш файл jest.config.js:

const nextJest = require('next/jest')
 
// Providing the path to your Next.js app which will enable loading next.config.js and .env files
const createJestConfig = nextJest({ dir: './' })
 
// Any custom config you want to pass to Jest
const customJestConfig = {
  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
}
 
// createJestConfig is exported in this way to ensure that next/jest can load the Next.js configuration, which is async
module.exports = createJestConfig(customJestConfig)

Relay

Для включения поддержки Relay:

module.exports = {
  compiler: {
    relay: {
      // This should match relay.config.js
      src: './',
      artifactDirectory: './__generated__',
      language: 'typescript',
      eagerEsModules: false,
    },
  },
}

Важно знать: В Next.js все JavaScript-файлы в каталоге pages считаются маршрутами. Таким образом, для relay-compiler вам нужно указать настройки конфигурации artifactDirectory вне pages, иначе relay-compiler сгенерирует файлы рядом с исходным файлом в каталоге __generated__, и этот файл будет считаться маршрутом, что нарушит сборку в производстве.

Удаление свойств React

Позволяет удалять свойства JSX. Часто используется для тестирования. Аналогично babel-plugin-react-remove-properties.

Для удаления свойств, соответствующих стандартному регулярному выражению ^data-test:

module.exports = {
  compiler: {
    reactRemoveProperties: true,
  },
}

Для удаления пользовательских свойств:

module.exports = {
  compiler: {
    // The regexes defined here are processed in Rust so the syntax is different from
    // JavaScript `RegExp`s. See https://docs.rs/regex.
    reactRemoveProperties: { properties: ['^data-custom$'] },
  },
}

Удаление Console

Это преобразование позволяет удалять все вызовы console.* в коде приложения (не node_modules). Аналогично babel-plugin-transform-remove-console.

Удалить все вызовы console.*:

module.exports = {
  compiler: {
    removeConsole: true,
  },
}

Удалить вывод console.* за исключением console.error:

module.exports = {
  compiler: {
    removeConsole: {
      exclude: ['error'],
    },
  },
}

Устаревшие декораторы

Next.js автоматически обнаружит experimentalDecorators в jsconfig.json или tsconfig.json. Устаревшие декораторы обычно используются с более старыми версиями библиотек, таких как mobx.

Этот флаг поддерживается только для совместимости с существующими приложениями. Мы не рекомендуем использовать устаревшие декораторы в новых приложениях.

Вначале обновите до последней версии Next.js: npm install next@latest. Затем обновите ваш файл jsconfig.json или tsconfig.json:

{
  "compilerOptions": {
    "experimentalDecorators": true
  }
}

importSource

Next.js автоматически обнаружит jsxImportSource в jsconfig.json или tsconfig.json и примените его. Это часто используется с библиотеками, такими как Theme UI.

Вначале обновите до последней версии Next.js: npm install next@latest. Затем обновите ваш файл jsconfig.json или tsconfig.json:

{
  "compilerOptions": {
    "jsxImportSource": "theme-ui"
  }
}

Emotion

Мы работаем над переносом @emotion/babel-plugin в компилятор Next.js.

Вначале обновите до последней версии Next.js: npm install next@latest. Затем обновите ваш файл next.config.js:

 
module.exports = {
  compiler: {
    emotion: boolean | {
      // default is true. It will be disabled when build type is production.
      sourceMap?: boolean,
      // default is 'dev-only'.
      autoLabel?: 'never' | 'dev-only' | 'always',
      // default is '[local]'.
      // Allowed values: `[local]` `[filename]` and `[dirname]`
      // This option only works when autoLabel is set to 'dev-only' or 'always'.
      // It allows you to define the format of the resulting label.
      // The format is defined via string where variable parts are enclosed in square brackets [].
      // For example labelFormat: "my-classname--[local]", where [local] will be replaced with the name of the variable the result is assigned to.
      labelFormat?: string,
      // default is undefined.
      // This option allows you to tell the compiler what imports it should
      // look at to determine what it should transform so if you re-export
      // Emotion's exports, you can still use transforms.
      importMap?: {
        [packageName: string]: {
          [exportName: string]: {
            canonicalImport?: [string, string],
            styledBaseImport?: [string, string],
          }
        }
      },
    },
  },
}

Минификация

Компилятор swc Next.js используется для минимизации по умолчанию начиная с версии v13. Это в 7 раз быстрее, чем Terser.

Если Terser по какой-либо причине всё ещё нужен, это можно настроить.

module.exports = {
  swcMinify: false,
}

Транспиляция модулей

Next.js может автоматически транспилировать и пакетировать зависимости из локальных пакетов (например, монорепозиториев) или из внешних зависимостей (node_modules). Это заменяет пакет next-transpile-modules.

module.exports = {
  transpilePackages: ['@acme/ui', 'lodash-es'],
}

Модулизация импортов

Этот параметр был заменён на optimizePackageImports в Next.js 13.5. Мы рекомендуем обновить для использования нового параметра, который не требует ручной настройки путей импорта.

Экспериментальные функции

Профилирование трассировки SWC

Вы можете сгенерировать внутренние трассы преобразований SWC в формате событий трассировки Chromium trace event format.

module.exports = {
  experimental: {
    swcTraceProfiling: true,
  },
}

После включения SWC сгенерирует трассу под названием swc-trace-profile-${timestamp}.json в .next/. Просмотрщик трассировок Chromium (chrome://tracing/, https://ui.perfetto.dev/) или совместимый просмотрщик flamegraph (https://www.speedscope.app/) могут загрузить и визуализировать сгенерированные трассы.

Плагины SWC (экспериментальная версия)

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

module.exports = {
  experimental: {
    swcPlugins: [
      [
        'plugin',
        {
          ...pluginOptions,
        },
      ],
    ],
  },
}

swcPlugins принимает массив кортежей для настройки плагинов. Кортеж для плагина содержит путь к плагину и объект для конфигурации плагина. Путь к плагину может быть именем пакета npm-модуля или абсолютным путем к самому бинарному файлу .wasm.

Неподдерживаемые функции

Когда в вашем приложении есть файл .babelrc , Next.js автоматически вернётся к использованию Babel для преобразования отдельных файлов. Это обеспечивает обратную совместимость с существующими приложениями, которые используют пользовательские плагины Babel.

Если вы используете пользовательскую настройку Babel, пожалуйста, поделитесь вашей конфигурацией. Мы работаем над тем, чтобы перенести как можно больше часто используемых преобразований Babel, а также над поддержкой плагинов в будущем.

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