How to handle passing i18n dictionary file to all routes on the tree?
Answered
Satin Angora posted this in #help-forum
Satin AngoraOP
I setup my i18n to use
Making my page component
Considering that routes are under
Do you have any ideas on how to solve this?
json files as dictionaries, which I get from a repository. App directory is setup as [lang] slug being base route; src/app/[lang]/....Making my page component
async worked for home page, but for dashboard, I index each tab of dashboard as a separate subroute of .../dashboard/, and I don't want to wait for dictionary file each time.Considering that routes are under
[lang] slug, dictionary can be loaded once, and accessed globally for current language; like a singleton. But I'm not sure how to solve this problem with Next/React. I'm reading up on Context API, but don't know how to use it to solve my problem right now.Do you have any ideas on how to solve this?
Answered by not-milo.tsx
If your dashboard has server rendered pages you can fetch the dictionary only once on each page the same way you are doing for your home. If instead all your dashboard pages are client components then you have to use the context api and wrap all of them in a provider that has your dictionary data.
Here's a nice article on how to implement a context provider: https://www.freecodecamp.org/news/context-api-in-react/
Here's a nice article on how to implement a context provider: https://www.freecodecamp.org/news/context-api-in-react/
5 Replies
If your dashboard has server rendered pages you can fetch the dictionary only once on each page the same way you are doing for your home. If instead all your dashboard pages are client components then you have to use the context api and wrap all of them in a provider that has your dictionary data.
Here's a nice article on how to implement a context provider: https://www.freecodecamp.org/news/context-api-in-react/
Here's a nice article on how to implement a context provider: https://www.freecodecamp.org/news/context-api-in-react/
Answer
Satin AngoraOP
@not-milo.tsx I'm afraid that the dictionary fetch will happen on each page load, and will slow down the rendering of the page.
You're not entirely correct... That would be true for dynamic pages, but if you keep them statically generated at build time then each page is going to have its own set of localised metadata fields right out of the box when a crawler/user requests it. That can be beneficial for SEO since Google will show the relevant locale for a user that looks up your website.
Satin AngoraOP
Thank you for taking time to help me.
No problem ✌ðŸ»