next-translate
next-translate copied to clipboard
aralroca
PoC: Translations for Next.js fallback pages
Fixes https://github.com/vinissimus/next-translate/issues/575
See https://nextjs.org/docs/basic-features/data-fetching#fallback-pages
Page props on Next.js fallback pages are empty ({}). Therefore translations are also missing.
My idea to circumvent this is providing a new HOC withFallbackTranslation() to wrap any Next.js page which should have fallback translations. This HOC adds a static function __PAGE_NEXT_NAMESPACES to the component. This function is called within the appWithI18n component.
As fallback pages do not provide any way to use async operations, I had to add a way to load translations sync. That's why I also added a new config property loadLocaleFromSync.
To demonstrate that it works, I added a new route to examples/complext demo -> http://localhost:3000/more-examples/fallback/example-not-exists
Here are two Gifs to better show the effect:
Default behaviour for translations on fallback pages.
Notice the flicker while it defaults to the translation key.
Route: http://localhost:3000/more-examples/dynamicroute/example11?another=another+param
Fallback pages wrapped with HOC withFallbackTranslation
No flicker at all. The translations are loaded from the beginning on.
Route: http://localhost:3000/more-examples/fallback/example-not-exists?another=another+param
This PR should be seen as a proof of concept. There are certainly a few things that can and should be refactored/improved.
I'm looking forward to your feedback.
Did anyone of the maintainers already checkout this PR? I would be very interested in your feedback :)
@berndartmueller Sorry, I accidentally deleted the canary branch in the last release and the PR was closed automatically. I reopen it
@berndartmueller Sorry, I removed the canary branch when I made the release by accident and the PRs that were open have been closed. I am committed to review the PR during this week. Sorry for the delay. And thank you very much for the contribution. 👏