Next.js Discord

Discord Forum

Back button breaking Link component on safari

Unanswered
Holland Lop posted this in #help-forum
Open in Discord
Holland LopOP
I am experiencing some weird issue with the nextjs Link component on safari (only verified in development mode)

<Link href="https://stackoverflow.com">stackoverflow</Link>


When I click on the link for the first time I am redirected to stackoverflow
I click on the back button
I click on the link once again
I am no longer redirected anymore

On chrome I am not experiencing this issue, anyone else here did before?

56 Replies

josh
<Link href="https://stackoverflow.com%22%3Elink/</Link>

Is this a typo? Because it should be <Link href="https://stackoverflow.com">Text</Link>
Holland LopOP
That's a copy paste issue into discord, added a code black now.
josh
I gave you the wrong answer anyway - you shouldn't use <Link> for external sites, only internal pages
You can use good old <a>, eg <a href="https://stackoverflow.com">stackoverflow</a>
Holland LopOP
Thx, will try 🙂 Reddit was a bit 50/50, some said it was fine to use Link
Plott Hound
It is fine to use Link for external links
there is no real benefit, but it works
Holland LopOP
But it seems like it doesn't work with external links on safari when using the back button. Just tried the a tag and that works. But is there a way for the Link component to also work on safari? Or is this just a 'bug'?
josh
okay, sure. can we see the rest of the code?
Holland LopOP
That's basically all my code, I removed everything I have and put it directly in layout.tsx for now:

<Link href="https://stackoverflow.com">
    NextJS stackoverflow
</Link>

<a href="https://stackoverflow.com" target="_self">
    stackoverflow
</a>
Plott Hound
Works in safari for me
Holland LopOP
The a tags just works fine
But when using the Link it doesn't
So for you the external link is still working on safari when returning back to the original page?
Plott Hound
Hmm ok. Let me check my my versions
Sounds like a bug
Also share your next and safari versions
Holland LopOP
nextjs: 14.1.0
safari: 17.0 (19616.1.27.211.1)
will update my mac in the meanwhile to check if the safari version matters
josh
just checking you have no errors in console?
Holland LopOP
Just updated, still an issue on safari: 17.3.1 (19617.2.4.11.12). I have no errors in the console or in my server log.
Just be sure, this is working for you guys on nextjs 14.1.0? @josh @Plott Hound
josh
I don't have a Mac so I can't test it for you, sorry
Holland LopOP
No problem 🙂 Thx for the help nonetheless
Will probably add a check for external links and use a tags in those cases for now
josh
do you get the problem if you next build next start?
Holland LopOP
Yep, same result
josh
i'm not sure then. my first thought might be the html is malformed somehow (chrome is kind with mistakes, safari is not)
but it could also be a nextjs bug.
you could rule out the html malformed by pasting the View Source into this https://validator.w3.org/#validate_by_input
Holland LopOP
Some errors but none related to the link
Holland LopOP
Also just tried it inside a starter repo using npx create-next-app@latest, same issue. Will log a bug
josh
okay, good find!
Holland LopOP
https://github.com/vercel/next.js/issues/62015
Let's see if I get any response 😄
Plott Hound
Sorry I’m away from the pc for the night but I’ll investigate in the morning
Holland LopOP
Thx for the effort! 🙂
Holland LopOP
@Plott Hound did you have any chance to check if it's also an issue for you?
@Holland Lop <@578864362882727958> did you have any chance to check if it's also an issue for you?
Plott Hound
sorry i forgot, i'll do it right now
I just tried it and it worked for me: <Link href='https://stackoverflow.com'>External Link Test</Link>

Safari: Version 17.2.1 (18617.1.17.11.12, 18617)
Next: 14.1.0
when i click back in the browser it takes me back
is this the same as your setup?
Holland LopOP
Yes clicking back works
but what if you then click on the link again
that is not working for me
Plott Hound
Oh sorry lemme check
Holland LopOP
thx 🙂
Plott Hound
same here
its 100% a bug
hopefully the ticket gets noticed and a fix done soon
@Holland Lop thx 🙂
Plott Hound
for now just use <a> for external links
the issue you found only happens with external links, internal links behave normally
Holland LopOP
Yes indeed
thank you so much for double checking! 🙂