Next.js Discord

Discord Forum

Internationalisation examples?

Unanswered
GetPsyched posted this in #help-forum
Open in Discord
Avatar
GetPsychedOP
I'm following the [docs for i18n](https://nextjs.org/docs/app/building-your-application/routing/internationalization) but do I really have to do getDictionary(lang) in every page?

Wondering if there are other nextjs repos that have i18n so I can refer if they do the same or take a different approach

25 Replies

Avatar
GetPsychedOP
I've worked with i18n in React and what I've seen commonly there is having a global t function through the use of useContext which translates text
2 problems with this:
- Doesn't work with SSR
- Translating text like this feels weird unless you're passing the text along to a 3rd party API
The method of having dictionaries is decent but I wanted to know is that also how nextjs projects usually do i18n?
Avatar
American Crocodile
Yes, using context is common solution to do i18n, since you need to get translations from. ssr works fine with almost all packages listed in the docs, because they pre-render pages with selected language using params or cookies
Avatar
GetPsychedOP
SSR works with useContext?
Do I have to make a provider?
Avatar
American Crocodile
If you using app router then there is rsc (server components) and approach a bit different, if you using pages, then context is fine since ssr in pages router pre-renders static html on the server and then does hydration
here is example for app router
this is the state of javascritp survey app, we have a complete translation system, up to date to app router
it's a bit messy but there is everything and it works with static rendering, tokens can also be fetched in RSCs
we don't use a library, however translations are obtained via an API call (but you'd want to focus on the part within this Next.js app, the rest is less interesting, it's just how we get the strings)
Avatar
GetPsychedOP
This repo is quite overwhelming haha
Checking it out tho
Seems interesting. I doubt the added complexity is worth though 🤔
Avatar
American Crocodile
imo app router makes almost everything more complex 😄
pages example in this lib is way more staright forward and im using it on my current project
For pages you can also check next-translate, but there is some major errors that i found during usage, not sure if they fixed them
Avatar
GetPsychedOP
Not using pages
True lol
I think I'll work with the default i18n
Will check out next-i18n later down the line
Avatar
GetPsychedOP
Wait but in my method, how do I even get type checking on the dictionaries 🤔
Avatar
GetPsychedOP
Just remembered, I'll need a translation function either way for things that come from the DB
Do I even bother with a JSON then?