Next.js Discord

Discord Forum

Issue with next/link

Answered
Scale parasitoid posted this in #help-forum
Open in Discord
Scale parasitoidOP
Hi! For whatever reason, next/link does not work on production, and when switching between pages tailwind css does not render. This is only present on build as npm run dev still shows it with the real CSS working. DO you have any idea what is causing this? I'm usikng the latest version of nextjs and using simple Links but the CSS is not working and this is not something I've faced before. I'm hosting on vercel with edge functions and have a basic tailwind config. Let me know if you need any other information. Current build on https://hostile.pro
Answered by joulev
yes and this is the fix. don't use dangerouslySetInnerHtml on <head>, it messes up React's understanding of the DOM tree.
View full answer

44 Replies

Scale parasitoidOP
Found out its not just me but other projects have had this issue, does anyone know how to fix this
@joulev you most likely use separate root layouts for your login page and your main page?
Scale parasitoidOP
I don't they all have the same root latout
joulev
oh indeed, when i load the page the css works fine but when navigating the css is gone
could you make a minimal reproduction repository so i can clone and test?
what is the <head> in your layout.tsx like?
Scale parasitoidOP
I have removed the dangerously set and even then it still breaks
This si a problem not just me but others have faced
@joulev could you make a minimal reproduction repository so i can clone and test?
Scale parasitoidOP
Are you free in about 15 minutes no access to my pc
@Scale parasitoid Click to see attachment
joulev
1. remove the dangerouslySetInnerHtml in <head>. it plays funny things with the client-side react runtime and you don't want those funny things.
2. use only one <head>.

so: remove the first <head>.
I just removed both of the heads
Didn't work
This wasn't an issue only with me but with other projects
Its seems to be anext issue
Scale parasitoidOP
I even downgraded version and it still didn't work
actually wtf?
I changed it in package.jsoin but its stil building the latest version
While I could use <a></a> I really like the prefetching of next/link so
joulev
Could you make a minimal reproduction repository so that I can clone and test?
@joulev Could you make a minimal reproduction repository so that I can clone and test?
Scale parasitoidOP
what is your github username
joulev
no, please make it a public github repo so other people can take reference to as well. make it a [minimal](https://l.joulev.dev/mrr) repo so you don't have to show any business logic or secret parts of the codebase.
The issue was also present here
sorry for the late response
@Scale parasitoid The issue was also present here
joulev
but it is no longer present, isn't it? can you give me a minimal reproduction repository where the bug can be reproduced?
@joulev but it is no longer present, isn't it? can you give me a minimal reproduction repository where the bug can be reproduced?
Scale parasitoidOP
It's in an earlier commit with next/link in the navbar
I can reverte the change now to show you
joulev
also that repo is too big for me to debug anything – sorry for sounding rude but i don't have the time needed to figure out how to set up anything more than a minimal repo and this repo is too big for the effort im willing to spend. see https://codingkilledthecat.wordpress.com/2012/06/26/how-to-ask-for-programming-help/#:~:text=Narrow%20down%20the,also%3A%20SSCCE).
I'll make the repo for u
This issue is present here aswell
Going from FAQ back to home page through navbar causes client side issues
this seems to be an issue with next/link rather than anything on my side as there have been numerous reposiotries having this issue
@Scale parasitoid https://sass.karstest.pro/ https://github.com/Kars1996/SaasTemplateWebNext
joulev
yes and this is the fix. don't use dangerouslySetInnerHtml on <head>, it messes up React's understanding of the DOM tree.
Answer
joulev
if for whatsoever reason you must add that comment, use this hack
;<head>
  <script
    dangerouslySetInnerHTML={{
      __html: "</script><!-- Made by Kars 💘 --><script>",
    }} /* I'd appreciate it if you don't remove credits <3 */
  />
</head>

although i can picture in my head people asking you why you would be willing to spend all this effort when you could've just
;<html data-created-by="Kars">
Omg
😭😭