Search code examples
next.jsinternationalizationreact-i18next

How can I make the locales dynamic in NextJS?


my project includes dynamic routes and it's a NextJS project. Language options for these routes are coming dynamically. For example: **

  • localhost:3000/en/route1 --> There should be English language support for Route1.
  • localhost:3000/en/route2 --> There should be no English language support for Route2.

**

My next.config.js file:

i18n: {
  locales: ['tr', 'en', 'de', 'zh', 'ru', 'tk', 'bg', 'el', 'es', 'sa', 'fr'],
  defaultLocale: 'tr',
}

Here I want the languages I add in locales to change dynamically. There may be different language support for all routes. When I use it this way, it can redirect to localhost:3000/en/router2, even if it does not support English.

Note: I am using the getServerSideProps method to fetch the data.


Solution

  • I think the best way is:

    In getServerSideProps of route2, check the locale and if that has English then redirect the user to the route which does not have English language.