Loading critical CSS in Next.js

Question

Is there a way in Next.js to separate critical CSS and non critical for each page and load non-critical asynchronously ?

I am using styled-components in my pages and components + couple of external css libraries.

Thanks!

Answer 1

You can use module css, but not global. Global styles can only be used in _app.js, but you can import "module" css which is a built in feature. Is this what you mean?

// Foo.js component needing third party

import '@thirdparty/dist/styles.css'

// Foo.js component with module css from you

import styles from "./Foo.module.css";

I apologize if this is not what ur looking for. I'm not entirely sure what you are in need of.