Skip to content

Next.js

PostCSS設定のカスタマイズ

例

デフォルトの挙動

Next.js では、PostCSS を使って組み込み用のCSSをコンパイルしています。

何も設定していなくても、Next.js は以下のような変換によって CSS をコンパイルします:

  1. Autoprefixer は、CSS ルールセットにベンダープレフィックスを自動的に追加します（IE11 に戻す）。
  2. クロスブラウザのFlexboxのバグが仕様通りに動作するように修正されます。
  3. 新しい CSS の機能は、Internet Explorer 11 との互換性のために自動的にコンパイルされます:

デフォルトでは、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 モジュールをサポートするための設定は必要ありません。ファイルで 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
      }
    }
  }
};
Babel 設定のカスタマイズカスタムサーバー