Next.js Discord

Discord Forum

hash value of URL with highlighted text is truncated

Answered
HaykMkrtich posted this in #help-forum
Open in Discord
Avatar
Hi everyone, have you ever been faced with this problem. I've got recommendations from the SEO team. So basically I need to make urls by keeping the hash value on the url in the search bar.

In the screenshot you can see that scrolling to text section and highlighting works well but it removes hash from url.

Example url from my site
https://immigrantinvest.com/malta-citizenship-by-investment-en/#:~:text=Citizenship%20for%C2%A0exceptional%20services%20is%C2%A0acquired%20by%C2%A0naturalisation.%20First%2C%20investors%20get%C2%A0Malta%20residency%20and%C2%A0maintain%20the%C2%A0status%20for%C2%A01%C2%A0or%C2%A03%C2%A0years%3B
https://tenor.com/view/don%E2%80%99t-make-me-beg-gif-18284150441593567102
Example url from another site
https://medium.com/c-sharp-programming/how-to-perform-case-insensitive-string-comparison-in-c-6ea0b6948d64#:~:text=insensitive%20comparisons%20StringComparison.OrdinalIgnoreCase%20is%20the%20most%20straightforward%20approach.%20For%20better%20code%20reusability%2C%20consider%20creating%20an%20extension%20method.%20Always%20be%20aware%20of

After opening the link from my site you can see the hash parameter from the url removed. It seems that some sort of router.replace() works and removes the hash parameter. Meanwhile the second url from Medium works as I expected. It opens the page and scrolls to the corresponding text section by keeping the original url with hash as it was before.

Please tell me how I can achieve the behavior from the second link on my next.js project. Maybe some configuration exists for this in next.config.ts or in middleware.ts
Image
Answered by Anay-208
it could be. In non react apps, I'm not facing this issue
View full answer

12 Replies

Avatar
Hi, Can you tell your nextjs version?
Hmm, Weird, Nextjs is removing all # which begins with :~:
Avatar
Currently I'm using the 14.1 version. Not the latest stable version but I'm planning to upgrade in the next few months.
Avatar
I'll let you know if I find anything.
Avatar
Yeah you're right regular hash values are accessible on middleware and on client components via window.location.hash but this one which seems some sort of dynamic hash value/ highlighted url (actually I don't know how this parameter is named) is ignored by next.
Thank you 🙏🏻
Avatar
So @HaykMkrtich, I think you need to handle hashes by actually scrolling to that text fragment.

Its not being removed by nextjs, but rather the browser
It doesn't get removed in Firefox. IG the way to fix is to handle hashes fragments
Avatar
I've tried to handle hashes on client component layout wrapper and in middleware it didn't work I can get regular hashes like #title2 but this doesn't come with window location vor nextUrl. It seems like the browser handles it and removes depending on unknown factors.
Avatar
Hmm, I'll let you know If I find anything.
Avatar
chat GPT says this behavior can be because of client side js execution and because of layout shift rerendering client components. It seems that this feature works only on browser level with some browser web-api
Avatar
it could be. In non react apps, I'm not facing this issue
Answer