Description
Dear Team,
please consider looking into this specific issue.
The inlining of Critical CSS with the optimizeCss feature doesn't work when using Next.js 15.3.3 (Page Router) and @netlify/plugin-nextjs 5.11.2.
Although this might not affect a big amount of users, I found this feature very beneficial in terms of SEO and overall web performance, that's why I would like to bring your attention to this.
❌ Actual Behavior:
In Next.js 15.3.3 with @netlify/plugin-nextjs 5.11.2:
Next.js using optimizeCss feature with Page Router:
const nextConfig = {
experimental: {
optimizeCss: true,
},
};
Critical CSS is not inlined into the HTML.
Pages lack critical CSS styling, which can negatively impact SEO and performance metrics.
✅ Expected Behavior:
When the optimizeCss feature is enabled Next.js should inline critical CSS files into the HTML.
Steps to Reproduce
A reproduction example has been set up on Netlify:
Broken Example:
URL: https://v15-3-3--optimize-css.netlify.app/
GitHub: https://github.com/artabr/optimize-css-repro/tree/v15-3-3
Setup: Next.js 15.3.3 with the original Netlify adapter.
Outcome: No critical CSS inlined.
Patched Example (Working Version):
URL: https://v15-3-3-plugin-patched--optimize-css.netlify.app/
GitHub: https://github.com/artabr/optimize-css-repro/tree/v15-3-3-plugin-patched
Setup: Patched Netlify adapter to explicitly include .next/static/css in the server-function bundle.
Outcome: Critical CSS is correctly inlined.
Root Cause Analysis
The issue appears to be related to how @netlify/plugin-nextjs bundles assets:
The bundling is "selective," meaning that it omits files deemed unnecessary for most of the setups, including the .next/static/css files.
The optimizeCss feature relies on these CSS files being present in the server-function bundle. During page rendering (e.g., during ISR or revalidation), a server function using the Critters library attempts to locate the CSS files used on the page and inline them in the HTML. Without these files in the server-function bundle, the inlining process fails.
The issue is not specific to @netlify/plugin-nextjs. The AWS adapter also exhibits similar behavior, selectively bundling files and omitting .next/static/css.
✔️ Proposed Solution:
Include .next/static/css files in the server-function bundle.