コンテンツにスキップ
Pages RouterガイドPostCSS

Next.jsでのPostCSSの設定方法

デフォルトの動作

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

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

デフォルトでは、CSS Grid と カスタムプロパティ (CSS変数) は IE11 用には **コンパイルされません**。

IE11 用に CSS Grid Layout をコンパイルするには、CSS ファイルの先頭に次のコメントを配置してください

/* autoprefixer grid: autoplace */

プロジェクト全体で CSS Grid Layout のIE11サポートを有効にすることもできます。その場合、下記（折りたたまれています）に示す設定で 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 では、Autoprefixer およびコンパイルされたCSS機能）のターゲットブラウザを Browserslist を介して構成できます。

browserslist をカスタマイズするには、プロジェクトのルートに browserslist キーを持つ package.json を次のように作成します。

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.config.js ファイルで 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,
              },
            },
          ],
        ]
      : [
          // 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,
      },
    },
  },
}