How do I localize routes with next.js and next-i18next?

Question

I need to change the name of the route when I change the language. For example, I have a route /en/career but when I change to Czech language, I need a route /cs/kariera. Basically I need the URLs to be localized. Right now, when I'm on /en/career and change language to cs, I get /cs/career. This page should not exist at all and when I render the page on server, I correctly get 404. Can I do something like this with next-i18next package? If so, how?

I found this package https://github.com/vonschau/next-routes-with-locale which probably does exactly what I need but it's apparently no longer maintained and doesn't work under next.js 8.

I think this depends heavily on how you define and manage your routes. E.g. are they dynamic, are they defined in a CMS, are they hardcoded etc. Ultimately, if you want a link to an alternative language version of the current page, you'll need to pass all the route name variations to every page. — CaribouCode, Jun 03 '19 at 13:00

score 8 · Answer 1 · answered Jun 04 '19 at 13:30

8

What I did eventually was to use next-routes package and defined specific route for every page, such as:

module.exports = routes()
    .add('en-career-listing', '/en/career/:listing', 'career/listing')
    .add('cs-career-listing', '/cs/kariera/:listing', 'career/listing')
    .add('en-career', '/en/career', 'career')
    .add('cs-career', '/cs/kariera', 'career')
    .add('en-our-story', '/en/our-story', 'our-story')
    .add('cs-our-story', '/cs/nas-pribeh', 'our-story')

And I also had to create a custom Link component based on next/link where I manually added the language to URL.

answered Jun 04 '19 at 13:30

samuelg0rd0n

1,080
2
15
27

This is a good solution, you can combine the i18next Link with the next-routes one, by passing the first as an argument to the constructor https://github.com/fridays/next-routes/blob/master/src/index.js#L11-L12 – felixmosh Jun 04 '19 at 14:16
Can you share your solution? Thanks – tomexx Feb 12 '20 at 16:06
my requirements are same, can you please share your full solution? Thanks in advance. – Salman Lone Mar 11 '20 at 03:56
@SalmanLone What exactly are you missing? This is the full solution. There's really not anything else other than described. – samuelg0rd0n Mar 12 '20 at 07:24
I have actually implemented these routes. The thing is, when i am trying to push the route value like Router.pushRoute("route_name"); it works for couple of times and then does not change the url. can you tell us how you used these routes in or Router in your functional components? Thanks for the help in advance @samuelg0rd0n – Salman Lone Mar 18 '20 at 07:07
1

Thank you for your suggestions. However, I would like to ask, which translation package you are using ? i tried to use the next-i18n with subpath as a language indicator. however I just canot get the connection point between the URL with the language you are passing with the next i18n subpath ? are you using subpath or query for the language ? and can you provide an example on how did you call a route from a server side and on client side. – Salman Lone Mar 20 '20 at 10:16
@SalmanLone did you manage to do it? I am using @lingui/react and the same as above answer. But routes does not work :( – Prince Sodhi Feb 25 '21 at 18:59

score 0 · Answer 2 · answered Jun 03 '19 at 13:34

0

next-i18next supports this functionality, it called locale subpaths.

You need to configure: new NextI18Next({ localeSubpaths: 'foreign' }), and then use the Link & Router that NextI18Next instance has on it, not the next/router.

answered Jun 03 '19 at 13:34

felixmosh

32,615
9
69
88

2

I'm sorry but this is not what I need. I used localeSubpaths options but it does exactly what I want to avoid and what I describe in the question - for example, if I'm on /en/career and I switch to cs, I get /cs/career. But I need /cs/kariera - to change the rest of the URL too. – samuelg0rd0n Jun 04 '19 at 13:25
`localeSubpaths: 'foreign'` is deprecated now. – Gezim Sep 05 '19 at 19:33

score 0 · Answer 3 · answered Aug 10 '23 at 09:57

Solution for nextjs 13 and app router is to use next rewrites with next-intl.

Resources:

next-itnl localizing pathnames - https://next-intl-docs.vercel.app/docs/routing/middleware#localizing-pathnames
next.js rewrites - https://nextjs.org/docs/pages/api-reference/next-config-js/rewrites
next.js 13 named routes example - https://github.com/amannn/next-intl/tree/feat/next-13-rsc/examples/example-next-13-named-routes

(in: next.config.js):

 rewrites() {
    return [
      {
        source: '/cs/kariera',
        destination: '/en/career',
      },
    ]
  },

File structure: /app/[lang]/career/page.tsx

You want to map url to directory:

/cs/kariera -> /cs/career
/en/career -> /en/career

Myo riginal answer: Details: Translating URLs in Next.js 13 with App directory and next-intl

How do I localize routes with next.js and next-i18next?

3 Answers3

Linked