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>
}