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 the experimental.cssChunking option in your next.config.js file:

import type { NextConfig } from 'next'

const nextConfig = {
  experimental: {
    cssChunking: 'loose', // default
  },
} satisfies NextConfig

export default nextConfig

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    cssChunking: 'loose', // default
  },
}

module.exports = nextConfig

Options

• 'loose' (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.
• '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 import a.css and b.css in different files using a different import order (a before b, or b before a), 'loose' will merge the files in any order and assume there are no dependencies between them. However, if b.css depends on a.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 recommend 'loose' as it leads to fewer requests and better performance.