Menu

Next.jsでPostCSSを設定する方法

デフォルトの動作

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

何も設定せずに、Next.jsは以下の変換を行ってCSSをコンパイルします:

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

IE11用にCSS Gridレイアウトをコンパイルするには、CSSファイルの先頭に次のコメントを配置できます:

/* autoprefixer grid: autoplace */

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

CSS Gridレイアウトを有効にする設定を表示するにはクリックしてください
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モジュール

CSSモジュールをサポートするための設定は必要ありません。ファイルのCSSモジュールを有効にするには、ファイルの拡張子を.module.cssに変更します。

Next.jsのCSSモジュールサポートについての詳細はこちらをご覧ください。

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

警告: カスタム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.jsonpostcssキーから読み込むこともできます。

環境に基づいてプラグインを条件付きで含めたい場合に便利な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,
              },
            },
          ],
        ]
      : [
          // 開発環境では変換なし
        ],
}

補足: Next.jsでは、ファイル名を.postcssrc.jsとすることもできます。

PostCSSプラグインをインポートするために**require()を使用しないでください**。プラグインは文字列として提供する必要があります。

補足: 同じプロジェクト内の他のNext.js以外のツールをサポートするためにpostcss.config.jsが必要な場合は、代わりに相互運用可能なオブジェクトベースの形式を使用する必要があります:

module.exports = {
  plugins: {
    'postcss-flexbugs-fixes': {},
    'postcss-preset-env': {
      autoprefixer: {
        flexbox: 'no-2009',
      },
      stage: 3,
      features: {
        'custom-properties': false,
      },
    },
  },
}