Next.js Discord

Discord Forum

Best practice for internationalization routing with <Link>?

Unanswered
Atlantic herring posted this in #help-forum
Open in Discord
Avatar
Atlantic herringOP
I have this component:
<Link href="/legal/termsofservice">

I’m wondering, what’s the best way to handle routing when internationalizing? The routes should look like:
- /legal/de/termsofservice
- /legal/en/termsofservice

What's the best approach?

4 Replies

Avatar
American black bear
// get locale using params or some other way using pathname
const locale = getLocale()

<Link href={`/${locale}/legal/termsofservice`}


This is usually the way. You can take it a step further and create a custom component which automatically prefixes your Link url.

export function LocaleLink({href, children}: {href: string, children: React.ReactNode}) {
  // using context or some other way
  const locale = getLocale()

  return (
    <Link href={`${locale}${href}`}>{children}</Link>
  )
}
Avatar
Arinji
Do you need to make the links show the internatiolization? That just seems very hard to maintain
If it's not a requirement, just stick to Middleware rewrites