Next.js では、PostCSS を使って組み込み用のCSSをコンパイルしています。
何も設定していなくても、Next.js は以下のような変換によって CSS をコンパイルします:
デフォルトでは、IE11 対応のためにカスタムプロパティ(CSS 変数)はコンパイルされません。
CSS 変数は、安全に実行できないため、コンパイルされません。 変数を使用する必要がある場合は、SassによってコンパイルされるSass変数などを使用することを検討してください。
備考: グリッドレイアウトをサポートするには、Autoprefixerで
grid: "autoplace"
を有効にする必要があります。後述のプラグインのカスタマイズを参照してください。
Next.js では、Browserslistを介してターゲットブラウザ(Autoprefixer やコンパイルされた CSS 機能のため)を設定できます。
browserslist をカスタマイズするには、以下のように package.json
に browserslist
key を作成します:
{
"browserslist": [">0.3%", "not ie 11", "not dead", "not op_mini all"]
}
browserl.ist ツールを使って、どのブラウザをターゲットにしているか可視化できます。
CSS モジュールをサポートするための設定は必要ありません。ファイルで CSS モジュールを有効にするには、ファイルの名前を拡張子 .module.css
に変更します。
Next.jsのCSSモジュールのサポートについてはこちらをご覧ください。
警告: カスタムPostCSSの設定ファイルを定義すると、Next.jsはデフォルトの挙動を完全に無効にします。 Autoprefixerを含め、コンパイルに必要な機能はすべて手動で設定するようにしてください。 また、カスタムした設定に含まれるプラグインを手動でインストールする必要があります(例:
npm install postcss-flexbugs-fixes
)。
PostCSS の設定をカスタマイズするには、プロジェクトのルートに postcss.config.json
ファイルを作成します。
これは Next.js が使用するデフォルトの設定です:
{
"plugins": [
"postcss-flexbugs-fixes",
[
"postcss-preset-env",
{
"autoprefixer": {
"flexbox": "no-2009"
},
"stage": 3,
"features": {
"custom-properties": false
}
}
]
]
}
備考: Next.jsでは、ファイル名を
.postcssrc.json
とするか、package.json
のpostcss
keyから読み込むこともできます。
また、postcss.config.js
ファイルで PostCSS を設定も可能で、環境に応じて条件付きでプラグインを入れたい場合に便利です:
module.exports = {
plugins:
process.env.NODE_ENV === 'production'
? [
'postcss-flexbugs-fixes',
[
'postcss-preset-env',
{
autoprefixer: {
flexbox: 'no-2009'
},
stage: 3,
features: {
'custom-properties': false
}
}
]
]
: [
// No transformations in development
]
};
備考: Next.jsでは、ファイル名を
.postcssrc.js
とすることもできます。
PostCSS プラグインをインポートするために require()
を使用しないでください。プラグインは文字列として提供される必要があります。
備考: あなたの
postcss.config.js
が同じプロジェクト内でNext.js以外のツールをサポートする必要がある場合、代わりに相互運用可能なオブジェクトベースのフォーマットを使用しなければなりません:module.exports = { plugins: { 'postcss-flexbugs-fixes': {}, 'postcss-preset-env': { autoprefixer: { flexbox: 'no-2009' }, stage: 3, features: { 'custom-properties': false } } } };