Internationalisation examples?
Unanswered
GetPsyched posted this in #help-forum
I'm following the [docs for i18n](https://nextjs.org/docs/app/building-your-application/routing/internationalization) but do I really have to do
Wondering if there are other nextjs repos that have i18n so I can refer if they do the same or take a different approach
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
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 text2 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
- 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?
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
SSR works with
useContext
?Do I have to make a provider?
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)
This repo is quite overwhelming haha
Checking it out tho
Seems interesting. I doubt the added complexity is worth though 🤔
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
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
Not using pages
True lol
I think I'll work with the default i18n
Will check out next-i18n later down the line
Wait but in my method, how do I even get type checking on the dictionaries 🤔
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?