cssChunking

CSS チャンキングは、CSS ファイルを分割して並べ替え、チャンクに分けることでウェブアプリケーションのパフォーマンスを向上させる戦略です。これにより、アプリケーションのすべての CSS を一度に読み込む代わりに、特定のルートに必要な CSS のみを読み込むことができます。

next.config.js ファイルの experimental.cssChunking オプションを使用して、CSS ファイルのチャンキング方法を制御できます:

import type { NextConfig } from 'next'

const nextConfig = {
  experimental: {
    cssChunking: true, // デフォルト
  },
} satisfies NextConfig

export default nextConfig

オプション

• true (デフォルト): Next.js は可能な限り CSS ファイルをマージしようとし、インポート順序からファイル間の明示的および暗黙的な依存関係を判断して、チャンク数（つまりリクエスト数）を減らします。
• false: Next.js は CSS ファイルのマージや並べ替えを行いません。
• 'strict': Next.js はファイルにインポートされた順序通りに CSS ファイルを読み込みます。これにより、チャンク数とリクエスト数が増える可能性があります。

予期しない CSS の動作が発生した場合、'strict' の使用を検討してください。例えば、異なるファイルで a.css と b.css を異なる import 順序（a の前に b、または b の前に a）でインポートする場合、true はファイルを任意の順序でマージし、それらの間に依存関係がないと仮定します。しかし、b.css が a.css に依存している場合、ファイルがマージされないように 'strict' を使用し、代わりにインポートされた順序で読み込むことをお勧めします。これにより、チャンク数とリクエスト数が増える可能性があります。

ほとんどのアプリケーションでは、リクエスト数を減らしパフォーマンスを向上させるため、true をお勧めします。