PostCSS

デフォルトの動作

Next.jsは組み込みのCSSサポートのためにPostCSSを使用してCSSをコンパイルします。

特に設定しない場合、Next.jsは以下の変換を使用してCSSをコンパイルします：

• Autoprefixerが自動的にCSSルールにベンダープレフィックスを追加します（IE11まで遡って）。
• クロスブラウザのFlexboxのバグが仕様のように修正されます。
• Internet Explorer 11との互換性のために、新しいCSS機能が自動的にコンパイルされます：
  • all プロパティ
  • Break プロパティ
  • font-variant プロパティ
  • Gap プロパティ
  • メディアクエリの範囲

デフォルトでは、CSS Gridとカスタムプロパティ（CSSの変数）はIE11のサポートのためにコンパイルされません。

CSS Grid レイアウトをIE11用にコンパイルするには、CSSファイルの先頭に以下のコメントを配置します：

/* autoprefixer grid: autoplace */

また、プロジェクト全体でCSS Grid レイアウトのIE11サポートを有効にするには、以下に示す設定（折りたたまれています）でautoprefixerを構成できます。 詳細については、以下の「プラグインのカスタマイズ」を参照してください。

{
  "plugins": [
    "postcss-flexbugs-fixes",
    [
      "postcss-preset-env",
      {
        "autoprefixer": {
          "flexbox": "no-2009",
          "grid": "autoplace"
        },
        "stage": 3,
        "features": {
          "custom-properties": false
        }
      }
    ]
  ]
}

CSS変数は、安全にコンパイルすることが不可能なため、コンパイルされません。 変数を使用する必要がある場合は、Sass変数のように、Sassによってコンパイル時に除去される方法を検討してください。

ターゲットブラウザのカスタマイズ

Next.jsでは、Browserslistを通じて、ターゲットブラウザ（AutoprefixerとコンパイルされたCSS機能用）を構成できます。

Browserslistをカスタマイズするには、package.jsonにbrowserslistキーを次のように作成します：

{
  "browserslist": [">0.3%", "not dead", "not op_mini all"]
}

browsersl.istツールを使用して、対象としているブラウザを可視化できます。

CSS モジュール

CSS Modulesをサポートするための設定は不要です。CSSモジュールを有効にするには、.module.css拡張子を持つファイル名に変更します。

Next.jsのCSSモジュールサポートの詳細について、さらに学ぶことができます。

プラグインのカスタマイズ

警告: カスタムPostCSS設定ファイルを定義すると、Next.jsはデフォルトの動作を完全に無効化します。 Autoprefixerを含め、コンパイルする必要のあるすべての機能を手動で構成してください。 また、カスタム設定に含まれるプラグインを手動でインストールする必要があります。例：npm install postcss-flexbugs-fixes postcss-preset-env。

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キーからの読み込みも許可されています。

環境に基づいてプラグインを条件付きで含めたい場合は、postcss.config.jsファイルで設定することも可能です：

module.exports = {
  plugins:
    process.env.NODE_ENV === 'production'
      ? [
          'postcss-flexbugs-fixes',
          [
            'postcss-preset-env',
            {
              autoprefixer: {
                flexbox: 'no-2009',
              },
              stage: 3,
              features: {
                'custom-properties': false,
              },
            },
          ],
        ]
      : [
          // 開発環境では変換なし
        ],
}

補足: 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,
      },
    },
  },
}