Hook for accessing localized urls

[kieranm]

Hi all,

LocalizedLink works well for navigating with links and preserving the right locale. However, in some places in our app we navigate manually using router.replace(...), for example in our Command+K interface.

Is there a hook that allows us to get a localised URL for a given path? e.g.

const url = useLocalizedUrl("/path/to/page")
router.replace(url)

Thanks!

[amannn]

Hi @kieranm,

that's a great question—I was wondering the same thing!

It seems to me like there are a few options here:

1. Wrap next/link and useRouter

import {useLocalizedRouter} from 'next-intl/client'; // Only available/relevant in Client Components
import {LocalizedLink} from 'next-intl';

const router = useLocalizedRouter();
router.push('/about');
router.replace('/about');
router.prefetch('/about');

<LocalizedLink href="/about">About</LocalizedLink>
<LocalizedLink href={{pathname: "/about"}}>About</LocalizedLink>

2. Provide a low-level function

const localizeHref = useHrefLocalizer();
router.push(localizeHref('/about'));

3. Don't expose anything

… and let the user implement this via useLocale since it's quite straightforward.

const locale = useLocale();
router.push(`/${locale}/about`);

---

Do you have any preference here? I have a tendency to no. 1 as that way you only have to import a single component or hook for your routing needs (otherwise e.g. useHrefLocalizer + useRouter in every component). The drawback is that we have to keep up with the API of the underlying APIs from Next.js, but that might not be that hard.

Here's the implementation if you want to start experimenting with this:

Implementation

import {useLocale} from 'next-intl';
import Link from 'next/link';
import {useRouter} from 'next/navigation';
import {useCallback, useMemo} from 'react';

function useHrefLocalizer() {
  const locale = useLocale();

  return useCallback(
    (href: string, forceLocale?: string) => {
      let localizedHref = '/' + (forceLocale || locale);
      if (href !== '/') {
        localizedHref += href;
      }
      return localizedHref;
    },
    [locale]
  );
}

function useLocalizedRouter() {
  const localizeHref = useHrefLocalizer();
  const router = useRouter();

  return useMemo(
    () => ({
      ...router,
      push(href: string) {
        return router.push(localizeHref(href));
      },
      replace(href: string) {
        return router.replace(localizeHref(href));
      },
      prefetch(href: string) {
        return router.prefetch(localizeHref(href));
      }
    }),
    [localizeHref, router]
  );
}

function LocalizedLink({href, locale, ...rest}) {
  const localizeHref = useHrefLocalizer();
  return <Link href={localizeHref(href, locale)} {...rest} />;
}

If you're currently building an app with the new capabilities it would be great if you could try the proposed APIs and let me know what you think!

[kieranm]

Hi @amannn
Thank you for this! We are going to try the useLocalizedRouter approach.

Maybe you could provide all three of these approaches so people could choose the best one for them?