[Question] How to use the "fallbackLocale" in the i18nProviderClient "fallback" component?

gustaveWPM commented 11 months ago

Hello there,

Given the following example:

<I18nProviderClient fallback={<p> Loading...</p>} fallbackLocale={en}>

I didn't understand how to do something like this (it obviously doesn't make sense to use fallbackLocale as a function here, but I guess this example would be sufficiently clear to help you to understand what I'm trying to do):

<I18nProviderClient fallback={<p>{fallbackLocale('vocab.loading')}</p>} fallbackLocale={en}>

In my project, I tried to use getClientSideI18n() in the code of my fallback component, but it doesn't seem to be the right way to do.

Is it even possible to achieve this at the moment? Regards!

gustaveWPM commented 11 months ago

Uhhh, I'm so dumb. Just made something like:

// * ...
import fr from '@/i18n/locales/fr';

export default function RootLayout({ children }: RootLayoutProps) {
  return (
    <I18nProviderClient fallbackLocale={fr}>
      <html lang={useCurrentLocale()}>
        <body className="flex flex-col min-h-screen">
          <SplashScreen />
          <NextTopLoader {...{ ...ProgressbarConfig.PROPS }} />
          <SitewideNavbar />
          {children}
        </body>
      </html>
    </I18nProviderClient>
  );
}

QuiiBz commented 11 months ago

This is the correct way to achieve what you want. Closing at it seems solved? But feel free to re-open if it's not the case!

gustaveWPM commented 11 months ago

Thank you for your answer! Moving this "discussion" on this issue: https://github.com/QuiiBz/next-international/issues/191

QuiiBz / next-international

[Question] How to use the "fallbackLocale" in the i18nProviderClient "fallback" component? #189