cssChunking

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

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

TypeScript
JavaScript

next.config.ts
import type { NextConfig } from 'next'

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

export default nextConfig

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

module.exports = nextConfig

オプション

'loose' (デフォルト): Next.jsはできる限りCSSファイルを結合し、ファイル間の依存関係を明示的および暗黙的にimport順に判断してチャンク数を減らし、リクエスト数を減らします
'strict': Next.jsは、ファイルにimportされた順序で正確にCSSファイルを読み込みますが、これによりチャンクやリクエストが増えることがあります

予期しないCSSの動作が発生した場合には、'strict' を使用することを検討するかもしれません。たとえば、異なるファイルで異なる import 順序（a を b の前、または b を a の前）で a.css と b.css をインポートしている場合、'loose' は任意の順序でファイルを結合し、それらの間に依存関係がないと仮定します。しかし、もし b.css が a.css に依存している場合には、ファイルが結合されるのを防ぎ、インポートされた順序で読み込ませるために 'strict' を使用するほうがよいかもしれません。これは、より多くのチャンクとリクエストにつながる可能性があります。

多くのアプリケーションでは、リクエスト数が少なく、より良いパフォーマンスを実現するために 'loose' をお勧めします。

オプション​

オプション