How to use URL hash with redirect?

[lazakrisz]

Hi!
Thanks so much for this amazing library 🙏 . Got a quick question, I've seen that we can pass the URL hash with the Link component, however I'm wondering how to do the same with the redirect function? (see here for the Link: #1500 (comment)). Here is another with the <Link /> #1868 (reply in thread)
ex.:

import { getPathname as getI18nPathname, redirect } from "@/i18n/navigation";

export async function search(prevState: unknown, formData: FormData) {
//...

redirect({
    href: {
      pathname: "/news",
      query: Object.fromEntries(searchParams),
      hash: "#search-results" // 👈 how do I pass this here?
    },
    locale,
  });
}

I've tried using the redirect from next/navigation, however I suspect the middleware just strips it out, when I have the following routing configuration enabled:

import { defineRouting } from "next-intl/routing";

export const routing = defineRouting({
  locales: ["hu"],

  defaultLocale: "hu",

  localeDetection: false,
  localePrefix: "as-needed",

  pathnames: {
    "/": "/",

    // ...

    "/news": {
      hu: "/hirek",
    },

    // ...

    "/news/[slug]": {
      hu: "/hirek/[slug]",
    },
  },
});

ex.:

const locale = await getLocale();
const pathname = await getPathname({
  pathname: "/news",
  locale,
});

const url = `${pathname}?${searchParams.toString()}#search-results`;

redirect(url);

the redirect happens and the #search-results is stripped.

Thank you for the help!

[amannn]

Hey, glad to hear if next-intl is working well for you so far! 🙌

I suspect the middleware just strips it out

The thing about URL hashes is that they are not sent to the server. I haven't used them in combination with redirect yet, but I'd assume they can be returned from the server though.

Can you have a closer look with the network tools to see if a hash is correctly returned as part of the HTTP redirect with the Location header? The client should make a new request to that endpoint, will not include the hash, but potentially use it once the page returns. If another redirect happens here, I think the hash is likely lost.

There's also some nuance if you call redirect during a server or client render. For the latter, internally Next.js delegates the navigation to useRouter.

I think some debugging might help here to understand the situation a bit better—potentially also with a minimal Next.js app that doesn't even use next-intl.

If you could share a demo URL that'd also be helpful!

[lazakrisz]

Hey @amannn, thanks for the quick response, I've prepared a repo: https://github.com/lazakrisz/intl-redirect. I've also done some experimentation, which I left in the repo. I added two paths,

I'm also just noticing some weird flashing issues when the server action does the actual redirect. This could entirely be due to the same thing you have pointed out with next's redirect although I fail to understand why a server function's redirect would cause / trigger a client side redirect with all that "flashing" / "flickering". I did find this: vercel/next.js#57455 maybe its related? 🤔
I checked the headers, and this is what I get back in the response headers:

HTTP/1.1 303 See Other
Vary: RSC, Next-Router-State-Tree, Next-Router-Prefetch, Next-Router-Segment-Prefetch, Accept-Encoding
Cache-Control: no-store, must-revalidate
x-action-revalidated: [[],0,0]
x-action-redirect: /test?query=testing#search-results;push
content-type: text/x-component
date: Fri, 04 Jul 2025 11:55:44 GMT
X-Powered-By: Next.js
Content-Encoding: gzip
Connection: keep-alive
Keep-Alive: timeout=5
Transfer-Encoding: chunked

The headers seem to be there.

Based on that I've done some more research in the next repo and came across this: vercel/next.js#77101, which is pretty much the same issue that I'm having, not only that but sometimes even when visiting the page the hash in the URL is not being respected, which I suspect is also a next issue 😔.

All in all maybe none of these are actually related to next-intl? 🤔

[amannn]

Hmm, it could be! If you can reproduce it without next-intl, it‘d certainly be a good idea to report this upstream!

[lazakrisz]

Okay, thanks a bunch! Sorry to have bothered you with this, considering that it's a Next issue. 😅

[amannn]

No worries, it sometimes takes a bit of digging to find the cause! 😊