3

I'm really happy to see i18n going into Next.js core with Next.js 10.

However, I'm wondering if and how we can use i18n to translate page names (urls?).

For example, let's say I have a contact page under mypage.de/kontakt (for default German language).

With Next.js 10 configured, Next.js automatically creates the route mypage.de/en/kontakt, which is fine so far, but how can we translate the page name as well? Instead of /kontakt, I'd like to have /contact.

Is or will this be possible with Next.js 10 out of the box?

Does it require additional libraries? What will be the right way to do this in 2021?

Thank you very much!

K. D.
  • 4,041
  • 9
  • 48
  • 72
  • 4
    It's not directly possible to do that but you can use ```rewrites``` in ```next.config.js``` to redirect to the route you want – enoch Nov 17 '20 at 22:55
  • 1
    Does this answer your question: [How to setup i18n translated URL routes in Next.js?](https://stackoverflow.com/a/68731057/1870780)? – juliomalves Aug 24 '21 at 16:06

1 Answers1

0

Imagine you have only one file named src/pages/contact.tsx. There are 2 scenarios.

  1. User is hitting "foobar/contact" URL => you can use i18n redirection to redirect to "foobar/de/contact". Then client side you can use the browser API to change the URL (see related question).
  2. User is hitting "foobar/de/kontact" => since your page is named "contact" and not "kontact", that's a problem, because this page doesn't exist. You'll hit a 404 as is. Here you need a rewrite as stated by @enoch comment on your question. You'll want to rewrite "kontact", "contactez-nous", "contactar"... to "contact" route.

Hopefully, Next.js rewrite feature is very powerful, and allow some slight decoupling between the actual route path and the URL seen by the user. And you can also alter the URL directly in JS.

A third way is to use URL rewriting server-side, but for that at the time of writing (Next 11) it can only be handled ad the host level, so it depends where you upload the app.

Eric Burel
  • 3,790
  • 2
  • 35
  • 56