cssChunking

CSS Chunking is a strategy used to improve the performance of your web application by splitting and re-ordering CSS files into chunks. This allows you to load only the CSS that is needed for a specific route, instead of loading all the application's CSS at once.

You can control how CSS files are chunked using theexperimental.cssChunking option in yournext.config.js file:

importtype { NextConfig }from'next'constnextConfig= {  experimental: {    cssChunking:true,// default  },}satisfiesNextConfigexportdefault nextConfig

Options

• true (default): Next.js will try to merge CSS files whenever possible, determining explicit and implicit dependencies between files from import order to reduce the number of chunks and therefore the number of requests.
• false: Next.js will not attempt to merge or re-order your CSS files.
• 'strict': Next.js will load CSS files in the correct order they are imported into your files, which can lead to more chunks and requests.

You may consider using'strict' if you run into unexpected CSS behavior. For example, if you importa.css andb.css in different files using a differentimport order (a beforeb, orb beforea),true will merge the files in any order and assume there are no dependencies between them. However, ifb.css depends ona.css, you may want to use'strict' to prevent the files from being merged, and instead, load them in the order they are imported - which can result in more chunks and requests.

For most applications, we recommendtrue as it leads to fewer requests and better performance.