Internationalization Support inside Nextjs

[ivanjeremic]

Since Nextjs is an Awesome Framework that gives us every year more features out of the box wich is awesome, is there any chance we will see internationalization with best practices out of the box?

[lfades]

We will be working on a built in solution for i18n, there are no details yet but it's on our priorities

[binary64]

Ok here is my wish list

My ideal code structure:

/pages/index.tsx
/pages/about/index.tsx
/pages/about/address.tsx
/pages/~fr/about/address.tsx
/lang/[en].json
/lang/fr.json
/lang/de.json

Would give me the following routes working in next (HMR) as well as next export :-

/ <-- shows in English, because of the [ and ] in /lang/[en].json
/fr <-- shows in French
/de <-- shows in German
/fr/about <-- About page in French
/fr/about/address <-- The 'Our Address' page for French would render /pages/~fr/about/address.tsx - maybe altering the JSX/HTML. For example, we might want to use a different map provider, or add some extra images.
/de/about/address <-- As above but using the English JSX and only translating to German

For the / route the idea would be the implementator would be responsible for the business logic of showing the user a popup modal (or automatic redirection) to the locale-specific page. For example, a user with a French browser would load /, see a popup saying "Would you like to go to /fr ?", clicking Yes would do Router.push("/fr"), clicking No would reveal the English front page.

Later on perhaps we could figure how to have some translations that always load onto the / route, in order for the popup widget to have something in their language eg Deutch instead of German, as well as their flag as svg.

[Tylerian]

Ok here is my wish list

My ideal code structure:

/pages/index.tsx
/pages/about/index.tsx
/pages/about/address.tsx
/pages/~fr/about/address.tsx
/lang/[en].json
/lang/fr.json
/lang/de.json

Would give me the following routes working in next (HMR) as well as next export :-

/ <-- shows in English, because of the [ and ] in /lang/[en].json
/fr <-- shows in French
/de <-- shows in German
/fr/about <-- About page in French
/fr/about/address <-- The 'Our Address' page for French would render /pages/~fr/about/address.tsx - maybe altering the JSX/HTML. For example, we might want to use a different map provider, or add some extra images.
/de/about/address <-- As above but using the English JSX and only translating to German

For the / route the idea would be the implementator would be responsible for the business logic of showing the user a popup modal (or automatic redirection) to the locale-specific page. For example, a user with a French browser would load /, see a popup saying "Would you like to go to /fr ?", clicking Yes would do Router.push("/fr"), clicking No would reveal the English front page.

Later on perhaps we could figure how to have some translations that always load onto the / route, in order for the popup widget to have something in their language eg Deutch instead of German, as well as their flag as svg.

I wish Next.js won't enforce where we place translation files...

[Vadorequest]

@binary64 The NRN implementation actually looks quite like that:
https://github.com/UnlyEd/next-right-now/tree/v2-mst-aptd-gcms-lcz-sty/src/pages

Demo:

• https://nrn-v2-mst-aptd-gcms-lcz-sty-c1.now.sh (auto detect locale)
• https://nrn-v2-mst-aptd-gcms-lcz-sty-c1.now.sh/fr (static page)
• https://nrn-v2-mst-aptd-gcms-lcz-sty-c1.now.sh/en (static page)

But I wouldn't force people to have a path that starts with the locale though. It's how I designed it with NRN because I aim at building a (mostly) static site (SSG), but people mostly using SSR may want the locale not to be part of the url like that.

[ivanjeremic]

I think they should force us how to do it because otherwise it becomes a mess and every project will look different.

[leerob]

Check out the new i18n RFC and give us your feedback! 🚀