Next.js コンパイラ
SWC を使用してRustで記述されたNext.jsコンパイラにより、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内でクレートとして使用できます。
- パフォーマンス: SWCに切り替えることで、Next.jsの高速リフレッシュが約3倍、ビルドが約5倍高速化され、まだ最適化の余地があります。
- WebAssembly: RustのWASMサポートは、あらゆるプラットフォームをサポートし、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のコンパイルに個別のプロパティを設定できます。
注: `ssr`と`displayName`の変換は、Next.jsで`styled-components`を使用するための主な要件です。
module.exports = {
compiler: {
// see https://styled-components.dokyumento.jp/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.
minify?: boolean,
// Enabled by default.
transpileTemplateLiterals?: boolean,
// Empty by default.
namespace?: string,
// Disabled by default.
pure?: boolean,
// Enabled by default.
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ファイルを更新します
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では、
pagesディレクトリ内のすべてのJavaScriptファイルはルートと見なされます。そのため、relay-compilerでは、pagesの外部にartifactDirectory構成設定を指定する必要があります。そうでない場合、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.errorを除くconsole.*出力を削除する
module.exports = {
compiler: {
removeConsole: {
exclude: ['error'],
},
},
}