メインコンテンツまでスキップ

Next.js コンパイラ

Next.js コンパイラはRustで書かれ、SWCを使用して、Next.js がJavaScriptコードを本番用に変換および縮小することを可能にします。これにより、個別のファイル用のBabelと、出力バンドルを縮小するためのTerserが置き換えられます。

Next.jsコンパイラを使用したコンパイルはBabelよりも17倍速く、Next.js バージョン12からデフォルトで有効になっています。既存のBabel構成がある場合やサポートされていない機能を使用している場合、アプリケーションはNext.jsコンパイラから除外され、Babelを引き続き使用します。

なぜSWCなのか?

SWCは、次世代の高速な開発者ツールのための拡張可能なRustベースのプラットフォームです。

SWCはコンパイル、縮小化、バンドリングなどに使用でき、拡張することができます。組み込みまたはカスタムのコード変換を実行するために呼び出すことができます。これらの変換の実行は、Next.jsのような高度なツールを通じて行われます。

私たちはいくつかの理由でSWCを基盤とすることを選びました:

  • 拡張性: SWCは、Next.jsの中でCrateとして使用でき、ライブラリをフォークしたり設計の制約を回避したりする必要がありません。
  • パフォーマンス: SWCに切り替えることで、Next.jsで約3倍高速なFast Refreshと約5倍高速なビルドを実現でき、さらなる最適化の余地もまだあります。
  • WebAssembly: RustのWASMサポートは、すべての可能なプラットフォームをサポートし、Next.jsの開発をあらゆる場所に持っていくために不可欠です。
  • コミュニティ: Rustのコミュニティとエコシステムは素晴らしく、まだ成長し続けています。

サポートされている機能

Styled Components

babel-plugin-styled-componentsをNext.js コンパイラに移植する作業を進めています。

まず、Next.jsの最新バージョンをインストールします:npm install next@latest。次に、next.config.jsファイルを更新します:

next.config.js
module.exports = {
compiler: {
styledComponents: true,
},
}

高度な利用ケースの場合、個々のプロパティを設定してstyled-componentsコンパイルをカスタマイズできます。

注意:ssrdisplayNameの変換は、Next.jsでstyled-componentsを使用するための主要な要件です。

next.config.js
module.exports = {
compiler: {
// オプションの詳細についてはhttps://styled-components.com/docs/tooling#babel-pluginを参照してください。
styledComponents: {
// 開発時にデフォルトで有効になり、ファイルサイズを小さくするために本番環境では無効になります。
// これを設定すると、すべての環境でデフォルト設定を上書きします。
displayName?: boolean,
// デフォルトで有効です。
ssr?: boolean,
// デフォルトで有効です。
fileName?: boolean,
// デフォルトで空です。
topLevelImportPaths?: string[],
// デフォルトは["index"]です。
meaninglessFileNames?: string[],
// デフォルトで有効です。
minify?: boolean,
// デフォルトで有効です。
transpileTemplateLiterals?: boolean,
// デフォルトで空です。
namespace?: string,
// デフォルトで無効です。
pure?: boolean,
// デフォルトで有効です。
cssProp?: boolean,
},
},
}

Jest

Next.js コンパイラはあなたのテストをトランスパイルし、Next.jsとJestを一緒に設定するのを簡単にします:

  • .css.module.css(およびその.scss版)、画像インポートの自動モッキング
  • SWCを使用してtransformを自動設定
  • .env(およびそのすべてのバリアント)をprocess.envにロード
  • テストの解決および変換からnode_modulesを無視
  • テストの解決から.nextを無視
  • 実験的なSWC変換を有効にするためのフラグをnext.config.jsからロード

まず、Next.jsの最新バージョンをインストールします:npm install next@latest。次に、jest.config.jsファイルを更新します:

jest.config.js
const nextJest = require('next/jest')

// next.config.jsと.envファイルをロードできるようになるあなたのNext.jsアプリのパスを提供
const createJestConfig = nextJest({ dir: './' })

// Jestに渡したい任意のカスタム設定
const customJestConfig = {
setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
}

// createJestConfigは非同期でNext.js構成をロードできるようにこの方法でエクスポートされます。
module.exports = createJestConfig(customJestConfig)

Relay

Relayのサポートを有効にするには:

next.config.js
module.exports = {
compiler: {
relay: {
// これはrelay.config.jsに一致するべきです
src: './',
artifactDirectory: './__generated__',
language: 'typescript',
eagerEsModules: false,
},
},
}

Good to know: Next.jsでは、pagesディレクトリ内のすべてのJavaScriptファイルはルートとして考えられます。したがって、relay-compilerを使う場合、artifactDirectory設定をpagesの外で指定する必要があります。そうしないと、relay-compilerはソースファイルの隣に__generated__ディレクトリにファイルを生成し、このファイルはルートとみなされ、本番ビルドを壊すことになります。

Reactプロパティの削除

JSXプロパティを削除することを可能にします。これはしばしばテストに使用されます。babel-plugin-react-remove-propertiesに似ています。

デフォルトの正規表現^data-testに一致するプロパティを削除するには:

next.config.js
module.exports = {
compiler: {
reactRemoveProperties: true,
},
}

カスタムプロパティを削除するには:

next.config.js
module.exports = {
compiler: {
// ここで定義された正規表現はRustで処理されるため、
// JavaScriptの`RegExp`とは構文が異なります。 https://docs.rs/regexを参照してください。
reactRemoveProperties: { properties: ['^data-custom$'] },
},
}

Consoleの削除

この変換により、アプリケーションコード(node_modulesではない)内のすべてのconsole.*呼び出しを削除できます。babel-plugin-transform-remove-consoleに似ています。

すべてのconsole.*呼び出しを削除するには:

next.config.js
module.exports = {
compiler: {
removeConsole: true,
},
}

console.errorを除くconsole.*の出力を削除するには:

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

レガシーデコレータ

Next.jsはjsconfig.jsonまたはtsconfig.json内のexperimentalDecoratorsを自動的に検出します。レガシーデコレータは、mobxのような古いバージョンのライブラリでよく使用されます。

このフラグは、既存のアプリケーションとの互換性のためにのみサポートされています。新しいアプリケーションでレガシーデコレータを使用することはお勧めしません。

まず、Next.jsの最新バージョンをインストールします:npm install next@latest。次に、jsconfig.jsonまたはtsconfig.jsonファイルを更新します:

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

importSource

Next.jsはjsconfig.jsonまたはtsconfig.json内のjsxImportSourceを自動的に検出し、それを適用します。これは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ファイルを更新します:

next.config.js
module.exports = {
compiler: {
emotion: boolean | {
// デフォルトはtrueです。ビルドタイプがプロダクションの時に無効にされます。
sourceMap?: boolean,
// デフォルトは'dev-only'です。
autoLabel?: 'never' | 'dev-only' | 'always',
// デフォルトは'[local]'です。
// 許可されている値:`[local]` `[filename]` `[dirname]`
// このオプションはautoLabelが'dev-only'または'always'に設定されているときにのみ動作します。
// ラベルの結果のフォーマットを定義できます。
// 変数部分が角括弧[]で囲まれている文字列を介してフォーマットが定義されます。
// 例えば、labelFormat: "my-classname--[local]"の場合、[local]は割り当てられた変数の名前に置き換えられます。
labelFormat?: string,
// デフォルトは無効です。
// このオプションは、コンパイラにどのインポートを調べて変換すべきかを教えることを可能にします。
// Emotionのエクスポートを再エクスポートする場合、変換を引き続き使用できます。
importMap?: {
[packageName: string]: {
[exportName: string]: {
canonicalImport?: [string, string],
styledBaseImport?: [string, string],
}
}
},
},
},
}

縮小化

Next.jsのswcコンパイラはv13からデフォルトで縮小化に使用されます。これはTerserよりも7倍速いです。

何らかの理由でTerserがまだ必要な場合は、これを設定することができます。

next.config.js
module.exports = {
swcMinify: false,
}

モジュールトランスパイル

Next.jsは、ローカルパッケージ(モノレポのようなもの)や外部依存パッケージ(node_modules)からの依存関係を自動的にトランスパイルおよびバンドルすることができます。これはnext-transpile-modulesパッケージを置き換えます。

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

インポートのモジュール化

このオプションは、Next.js 13.5のoptimizePackageImportsによって置き換えられました。インポートパスの手動設定が不要な新しいオプションへのアップグレードをお勧めします。

実験的機能

SWCトレースプロファイリング

SWCの内部変換トレースをchromiumのtrace event formatとして生成できます。

next.config.js
module.exports = {
experimental: {
swcTraceProfiling: true,
},
}

有効にされると、swcは.next/swc-trace-profile-${timestamp}.jsonとしてトレースを生成します。Chromiumのトレースビューア(chrome://tracing/、https://ui.perfetto.dev/)、または互換性のあるフレームグラフビューア(https://www.speedscope.app/)が生成されたトレースを読み込んで視覚化できます。

SWCプラグイン(実験的)

SWCの変換を構成して、WASMで書かれたSWCの実験的プラグインサポートを使用して、変換の動作をカスタマイズできます。

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

swcPluginsはプラグインを構成するためのタプルの配列を受け取ります。プラグインのタプルには、プラグインのパスとプラグイン設定用のオブジェクトが含まれています。プラグインへのパスはnpmモジュールのパッケージ名か、.wasmバイナリそのものの絶対パスであることがあります。

サポートされていない機能

アプリケーションに.babelrcファイルがある場合、Next.jsは自動的に個々のファイルを変換するためにBabelを使用します。これによりカスタムBabelプラグインを利用する既存アプリケーションとの互換性が維持されます。

カスタムBabelセットアップを使用している場合は、あなたの構成を共有してください。幅広く使用されているBabel変換を可能な限り移植し、将来はプラグインのサポートを計画しています。

バージョン履歴

バージョン変更点
v13.1.0Module TranspilationModularize Imports の安定版がリリースされました。
v13.0.0SWC Minifierがデフォルトで有効になりました。
v12.3.0SWC Minifier 安定版 がリリースされました。
v12.2.0SWC Plugins の実験的サポートが追加されました。
v12.1.0Styled Components、Jest、Relay、Reactプロパティの削除、レガシーデコレータ、Consoleの削除、jsxImportSourceのサポートが追加されました。
v12.0.0Next.js コンパイラが導入されました