Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

NextJS 15's next/font breaks alternate header injection. #1261

Closed
3 tasks done
zenzen-sol opened this issue Aug 16, 2024 · 6 comments
Closed
3 tasks done

NextJS 15's next/font breaks alternate header injection. #1261

zenzen-sol opened this issue Aug 16, 2024 · 6 comments
Labels
bug Something isn't working upstream-issue This issue is caused by an upstream dependency (e.g. Next.js)

Comments

@zenzen-sol
Copy link

Description

I notice that in the NextJS 15 release candidate, the "alternate" links that should appear in the response header are missing if next/font is used to optimize fonts. I'm not sure whether this issue belongs to NextJS or next-intl.

Verifications

  • I've verified that the problem I'm experiencing isn't covered in the docs.
  • I've searched for similar, existing issues on GitHub and Stack Overflow.
  • I've compared my app to a working example to look for differences.

Mandatory reproduction URL

https://github.com/zenzen-sol/next-reproduction-template/tree/sol/repro-001-next-15-broken

Reproduction description

Steps to reproduce:

  1. Open reproduction
  2. Run pnpm run dev
  3. Reload http://localhost:3000 in a browser.
  4. Check the response header links in dev tools.

✅ OK(Next 14): https://github.com/zenzen-sol/next-reproduction-template/tree/sol/repro-001-Next-14-working

CleanShot 2024-08-16 at 16 44 36@2x


🙅🏻Broken (Next 15rc + next/font): https://github.com/zenzen-sol/next-reproduction-template/tree/sol/repro-001-next-15-broken

CleanShot 2024-08-16 at 16 45 25@2x


✅ OK (Next 15rc without next/font): https://github.com/zenzen-sol/next-reproduction-template/tree/sol/repro-001-next-15-working

CleanShot 2024-08-16 at 16 46 20@2x

Expected behaviour

Both the next-intl and next/font links should be present in the response header.

@zenzen-sol zenzen-sol added bug Something isn't working unconfirmed Needs triage. labels Aug 16, 2024
@amannn
Copy link
Owner

amannn commented Aug 16, 2024

Many thanks for the thoughtful bug report and reproduction! Do you think you could report this upstream in the Next.js repo? Seems like this is something to be addressed there. If you do, can you leave a link here so we can track the upstream issue?

@amannn amannn added the upstream-issue This issue is caused by an upstream dependency (e.g. Next.js) label Aug 16, 2024
@zenzen-sol
Copy link
Author

@amannn Thanks. The upstream issue is here.

@amannn
Copy link
Owner

amannn commented Aug 20, 2024

Thanks a lot, I'll keep an eye on the issue!

@A13k2
Copy link

A13k2 commented Oct 3, 2024

Had a similar problem with nextjs 14. next/fonts would overwrite the first call to the document with the fonts.

This did not show up on local testing, just when deployed to vercel.

Our solution was to stop using next/fonts

@jefer94
Copy link

jefer94 commented Nov 12, 2024

I was reporting this issue. you could reproduce this error with

  1. Go to https://www.capyschool.com/en/reader the link header will be set by Next Font
  2. Click in CapySchool, Link was set by Next Intl
  3. Click on Learn, IPA Reader, the header will be set by Next Intl
  4. Reload and the link header will be set by Next Font

What I am using? Next Font and Next Intl, I am not sure what library is doing the overwriting

localFont localFont

Mmmm it seems like a Next Font issue, I think that you set this header on Middleware and Next is overwriting it on page execution

@amannn
Copy link
Owner

amannn commented Nov 29, 2024

There are currently two issues open for the same topic, I'll close this in favor of #1442. I noticed also next/image with priority causes the same error.

@amannn amannn closed this as completed Nov 29, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working upstream-issue This issue is caused by an upstream dependency (e.g. Next.js)
Projects
None yet
Development

No branches or pull requests

4 participants