PostCSS

例

Tailwind CSS の例

デフォルトの動作

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

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

Autoprefixer が自動的にベンダープレフィックスを CSS ルールに追加します（IE11 まで対応）。
クロスブラウザの Flexbox バグが修正され、仕様通りに動作します。
新しい CSS 機能は Internet Explorer 11 との互換性のために自動的にコンパイルされます:

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

CSS グリッドレイアウトを IE11 用にコンパイルするには、CSS ファイルの先頭に以下のコメントを追加します:

/* autoprefixer grid: autoplace */

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

クリックして CSS グリッドレイアウトを有効にする設定を表示

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.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,
              },
            },
          ],
        ]
      : [
          // 開発時は変換なし
        ],
}

豆知識: 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,
      },
    },
  },
}

デフォルトの動作

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

CSS モジュール

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

On this page