Next js change path name based on local

Question

In my next.js project, I want to change the URL based on the locals

This is my default URL for en language

http://localhost:3000/en/privacy-policy

Now if I switch the language en to fr then I want to change the url like this

http://localhost:3000/fr/politique-de-confidentialite

Here I will be on the same page will change the content depending on locals en or fr

Page will be same just will change the url privacy-policy to politique-de-confidentialite based on en or fr

Thanks :)

Answer 1

It depend on your architecture design and how you translating the content either you using packages to translate the content or you fetching the content from database depending on current language. In general, you can make the page's slug dynamic, like the following folder structure;

-> app // app router folder
  --> [locals] // dynamic language slug
  --> page.js
     ---> [pages] // dynamic page slug (name) for locals
     ---> page.js

So, when you change the language you can translate, get from file, or from database the current path and redirect to it like this http://localhost:3000/${locals}/${pages} (http://localhost:3000/en/privacy-policy to http://localhost:3000/fr/politique-de-confidentialite).

For more information and detail you can refer to this examples https://github.com/PhraseApp-Blog/next-i18next-demo-2023 or/and https://github.com/i18next/next-i18next/tree/master/examples