cssChunking

CSS Chunkingは、CSSファイルをチャンクに分割し、再配置することでWebアプリケーションのパフォーマンスを向上させる戦略です。これにより、アプリケーション全体のCSSを一度に読み込むのではなく、特定のルートに必要なCSSのみを読み込むことができます。

next.config.jsファイルでexperimental.cssChunkingオプションを使用して、CSSファイルのチャンク化を制御できます：

TypeScript

next.config.ts

import type { NextConfig } from 'next'

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

export default nextConfig

JavaScript

next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    cssChunking: true, // デフォルト
  },
}

module.exports = nextConfig

オプション

• true (デフォルト): Next.jsは可能な限りCSSファイルをマージし、インポート順からファイル間の明示的および暗黙的な依存関係を決定して、チャンク数とリクエスト数を減らします
• false: Next.jsはCSSファイルのマージや再配置を試みません
• 'strict': Next.jsはファイルにインポートされた順序でCSSファイルを正しく読み込みます。これにより、チャンクとリクエストが増える可能性があります

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

ほとんどのアプリケーションでは、リクエストが少なくなり、パフォーマンスが向上するため、trueをお勧めします。