PoC: Translations for Next.js fallback pages #594
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Fixes #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 theappWithI18n
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.