Aller au contenu principal

Provider

Ce layout aura le fournisseur qui encapsulera notre projet, pour cela nous devons ajouter le code suivant dans le fichier layout.tsx.

  • Sans instance de i18n
    src/app/[locale]/layout.tsx
    "use client";
    import { ReactNode } from 'react';
    import { TranslationsProvider } from 'translate-projects-nextjs/provider';
    import { useParams } from 'next/navigation';
    import { i18nConfig } from '@/i18nConfig';

    export default function LocaleLayout({
    children,
    }: {
    children: ReactNode;
    params: Promise<{ locale: string }>;
    }) {
    const { locale } = useParams<any>();

    return <html lang={locale}>
    <body>
    <TranslationsProvider
    lng={i18nConfig.defaultLocale}
    i18nConfig={{
    fallbackLng: i18nConfig.locales,
    resources: {},
    supportedLngs: i18nConfig.locales,
    }}
    initialLocale={locale}
    >{children}
    </TranslationsProvider>
    </body>
    </html>
    }
  • Si tu veux avoir ta propre instance de i18n.
    • Crée ta propre instance de i18n.
      src/i18n.ts
      import i18next from 'i18next';
      import { initReactI18next } from 'react-i18next';
      import { i18nConfig } from './i18nConfig';

      const i18nInstance = i18next.createInstance();

      i18nInstance
      .use(initReactI18next)
      .init({
      lng: i18nConfig.defaultLocale,
      fallbackLng: i18nConfig.locales,
      resources: {},
      supportedLngs: i18nConfig.locales,
      ns: ['translation'],
      defaultNS: 'translation',
      debug: false,
      interpolation: {
      escapeValue: false,
      },
      });

      export default i18nInstance;
    • Tu importes l'instance que tu viens de créer et tu la passes à TranslationsProvider comme paramètre.
    src/app/[locale]/layout.tsx
    "use client";
    import { ReactNode } from 'react';
    import { TranslationsProvider } from 'translate-projects-nextjs/provider';
    import { useParams } from 'next/navigation';
    import i18next from '@/i18n';
    import { i18nConfig } from '@/i18nConfig';

    export default function LocaleLayout({
    children,
    }: {
    children: ReactNode;
    params: Promise<{ locale: string }>;
    }) {
    const { locale } = useParams<any>();

    return <html lang={locale}>
    <body>
    <TranslationsProvider
    i18nInstance={i18next} // Nous passons l'instance que tu viens de créer.
    initialLocale={locale}
    lng={i18nConfig.defaultLocale}
    >{children}
    </TranslationsProvider>
    </body>
    </html>
    }