inline critical CSS for App router

[erdalugur]

Goals

I want to add preload or inline critical CSS for App router but i can't find any solution support to do it.

Background

I want to improve web vitals scores for mobile devices

Proposal

experimental: { optimizeCss: true } in config.js or like down below

// in page.js
export const getCssLinks = (allfiles) => {
  retur allFiles
      .filter((file: any) => /\.css$/.test(file))
      .map((file: any) => (
        <style
          key={file}
          data-href={`${assetPrefix}/_next/${file}`}
          dangerouslySetInnerHTML={{
            __html: readFileSync(join(process.cwd(), ".next", file), "utf-8"),
          }}
        />
      ));
}
export default function Page(){
 return <div>server side app router page</div>
}

[Jeerihon]

Have you founded any solution?

[erdalugur]

not yet

[leerob]

We're working on an experimental flag to enable CSS inlining, for both webpack/turbopack.

You can follow along on the PR: #72195