Provider

Este layout tendra el provider que encapsulara nuestro proyecto, para ello debemos de añadir el siguiente código en el archivo layout.tsx.

Sin instancia 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 quieres tener tu propia instancia de i18n.

Creas tu propia instancia 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;

Importas la intancia que acabas de crear y se la pasas a TranslationsProvider como parámetro.

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} // Pasamos la instancia que acabas de crear
                initialLocale={locale}
                lng={i18nConfig.defaultLocale}
            >{children}
            </TranslationsProvider>
        </body>
    </html>
}