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.tsimport 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>
} - Crée ta propre instance de