AI & Agent Dev Bug Sandbox logo
AI & Agent Dev Bug Sandbox
Back to Radar

Pages Router: CSS Shared By A Page And A Next/Dynamic Component Is Removed After Client Navigation

When a CSS file is imported by both a page and a component loaded with next/dynamic and kept mounted via _app, the stylesheet link is incorrectly marked with data-n-p and removed during client-side navigation. This happens because the dynamic CSS manifest is not loaded correctly in the route module and not passed to _document.

highConfidence 95%Next.jsAffected V15.5.25Affected V16.4.0-Canary.55

Origin Analysis

In Next.js 15.4+ Pages Router refactor, the route module loads 'dynamic-css-manifest' without the .json extension and with handleMissing: true, which silently returns an empty object. Additionally, pages-handler does not pass the dynamicCssManifest to renderOpts, so Head.getCssLinks receives an empty set and marks all route stylesheets with data-n-p, causing them to be removed on client navigation.
1. Clone https://github.com/ithinkdancan/next-dynamic-css-repro\n2. npm install && npm run build && npm start\n3. Open http://localhost:3100/ - both red boxes are styled\n4. Click 'Go to /other' for client-side navigation\n5. Observe that the persistent box rendered from _app via next/dynamic loses its red background

Fixing Code Block

Edge Case Audit

The fix assumes the dynamic-css-manifest.json file exists at runtime; with handleMissing: true it will not crash if missing but may produce an empty manifest. In concurrent builds or custom server setups, ensure the manifest path and filename remain consistent. If deploying alongside older Next.js versions, the changed property may not be recognized; rollback to the provided _document prototype workaround if integration issues arise. Test with both webpack and turbopack builds, and verify that no additional stylesheets are inadvertently retained after navigation.

Ecosystem Topology