コンテンツへスキップ
アプリケーションの構築設定PostCSS

PostCSS

デフォルトの挙動

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

特別な設定なしで、Next.jsは以下の変換を加えてCSSをコンパイルします

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

IE11向けにCSS Grid Layoutをコンパイルするには、CSSファイルの冒頭に以下のコメントを配置します

/* autoprefixer grid: autoplace */

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

クリックしてCSS Grid Layoutを有効にする設定を表示
postcss.config.json
{
  "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キーを作成します

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

browsersl.istツールを使用すると、どのブラウザをターゲットにしているかを視覚的に確認できます。

CSS Modules

CSS Modulesをサポートするために設定は不要です。ファイルでCSS Modulesを有効にするには、ファイル名を.module.cssという拡張子に変更してください。

Next.jsのCSS Moduleサポートについてはこちらで詳細を確認できます。

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

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

PostCSSの設定をカスタマイズするには、プロジェクトのルートにpostcss.config.jsonファイルを作成します。

これはNext.jsで使用されるデフォルトの設定です

postcss.config.json
{
  "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はpostcss.config.jsファイルで設定することもできます。これは、環境に基づいて条件付きでプラグインを含めたい場合に便利です

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,
              },
            },
          ],
        ]
      : [
          // 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,
      },
    },
  },
}