PostCSS

デフォルトの動作

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

設定なしで、Next.jsは次の変換でCSSをコンパイルします。

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

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

IE11でCSS Grid Layoutをコンパイルするには、CSSファイルの先頭に次のコメントを配置できます。

/* autoprefixer grid: autoplace */

プロジェクト全体でCSS Grid Layoutの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では、AutoprefixerとコンパイルされたCSS機能について、Browserslistを通してターゲットブラウザを構成できます。

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

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

browsersl.istツールを使用すると、ターゲットとするブラウザを視覚化できます。

CSS Modules

CSS Modulesをサポートするために特別な設定は必要ありません。ファイルに対してCSS Modulesを有効にするには、ファイル名を拡張子` .module.css`に変更します。

Next.jsのCSS Modulesのサポートについてはこちらで詳しく学ぶことができます。

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

警告: カスタム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`ファイルを使用して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,
      },
    },
  },
}