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

Font Preload Tags Missing When Using Multi-Dot PageExtensions (E.G. 'Page.Tsx')

When next.config.js sets pageExtensions to a multi-dot pattern like ['page.tsx'], next/font does not emit <link rel="preload" as="font"> tags for statically prerendered app routes, causing delayed LCP for text using the font. CSS and JS preload tags are emitted correctly.

highConfidence 95%Next.jsAffected V16.3.0-Canary.76

Origin Analysis

The next-font-manifest plugin strips all dot extensions from app entry paths when generating manifest keys, while the runtime font lookup (getPreloadableFonts) and the CSS/JS manifest plugins strip only the final extension. For multi-dot pageExtensions like 'page.tsx', this produces a font manifest key such as '[project]/app/page' but a runtime lookup key '[project]/app/page.page', so no preloadable fonts are found and the tags are omitted.
1. Clone https://github.com/KinjiKawaguchi/nextjs-font-preload-multi-dot-repro 2. Run `pnpm install && pnpm build && pnpm start` 3. Execute `curl -s http://localhost:3000/ | grep 'rel="preload".*font'` 4. Observe no output (no font preload tags) 5. Checkout the `control` branch (default pageExtensions) and repeat steps 2-3; font preload tags appear.

Fixing Code Block

Edge Case Audit

Changing the manifest key format may require a clean rebuild (clear .next cache) to avoid stale references between the build-time manifest and runtime lookup. Any other internal consumers of the font manifest that assume the old fully-stripped key format could break; audit packages/next/src for such consumers. The fix must be tested with both Webpack and Turbopack builds and across different pageExtensions configurations. Rollback: revert this change and rebuild to restore previous behavior.

Ecosystem Topology