Improve nextjs build

[muhmushtaha]

Hi all,

I noticed a problem with my app build when I run build command it generates css files and one of them contains all my components and pages styles and it doesn't split it to small files which cause a problem when loading the site.

I'm using the next-css, next-sass, and next-less plugins to enable styling. using scss and less.

here a screenshot for the shard files from the build result

How I can improve the build and split the css files?

[funwhilelost]

There's now support for CSS modules in components - like import styles from './PageHeader.modules.scss' and that should break up the chunks better (it also prefixes the class names so you don't accidentally override them). It uses CSS modules so the components look like this <div className={styles.wrapper}>Header</div>.

[muhmushtaha]

Thanks @funwhilelost
I'll try this solution and see if it will solve the problem.

[muhmushtaha]

I tried to use the built-in css support but it not working because I'm using custom configs to be able to use sass and less in my app.
Do you have other ideas? and what about css-in-js does it do the same as CSS modules or not?
@funwhilelost

[funwhilelost]

@muhmushtaha I don't have any personal experience getting css-in-js going in Next. I'm using Sass CSS modules since the config is built into Next 9 and doesn't require any additional changes.