next-i18next with Prismic Multilang - Typescript

[MarvingMoreton]

Hello,

I am having some issues installing correctly next-i18next in my next App with Prismic Multilang.
Indeed, one part of the multilang is handle through Prismic (headless CMS, all the marketing website part), but I want to use next-i18next with namespaces to multilang the app part.

Although, I am having a hard time having next-i18next detecting on which locale I am.
I am not supposed to add a locale checker in a useEffect on every page/on every component, right..?

here's my i18n.ts:

import i18next from 'i18next'
import enNs1 from '@/public/locales/en/en.common.json'
import enNs2 from '@/public/locales/en/en.app.json'
import enFallback from '@/public/locales/en/en.fallback.json'
import frNs1 from '@/public/locales/fr/fr.common.json'
import frNs2 from '@/public/locales/fr/fr.app.json'

export const defaultNS = 'en.common'
export const fallbackNS = 'en.common'

i18next.init({
  debug: true,
  fallbackLng: 'en',
  defaultNS,
  fallbackNS,
  resources: {
    en: {
      common: enNs1,
      app: enNs2,
      fallback: enFallback
    },
    fr: {
      common: frNs1,
      app: frNs2
    }
  }
})

export default i18next

I am exporting my _app.tsx with
import { appWithTranslation } from 'next-i18next'
export default appWithTranslation(App)

And here is my next.config.js:

const prismic = require('@prismicio/client')
const sm = require('./slicemachine.config.json')

const localeOverrides = {
  'fr-ca': 'fr'
}

/** @returns {Promise<import('next').NextConfig>} */
module.exports = async () => {
  const client = prismic.createClient(sm.repositoryName)

  const repository = await client.getRepository()
  // const locales = repository.languages.map((lang) => lang.id)
  const locales = repository.languages.map(
    (lang) => localeOverrides[lang.id] || lang.id
  )

  return {
    reactStrictMode: true,
    swcMinify: true,
    images: {
     
 domains: [
      ...
      ]
    },
    i18n: {
      locales,
      // This is the default locale. It will not be included in URLs.
      defaultLocale: locales[0],
      // defaultLocale: 'en-ca'
      localeDetection: false
    }
  }
}

But still, in a component such as emailVerified.tsx, I will always get the English content even when I am on a FR locale/page:

import React from 'react'
import { ArrowRightIcon } from '@heroicons/react/20/solid'
import Link from 'next/link'
import i18next from '@/i18n'

const EmailVerified = ({ locale }) => {
  // if (locale == 'en-ca') {

  return (
    <div className="my-56  flex flex-col items-center justify-center bg-white max-lg:my-44">
      <div className="flex flex-col items-center gap-6 bg-white px-6 pb-8 text-center">
        <h1 className="text-blue-1000 mb-2 text-3xl font-bold sm:text-4xl">
          {/* {'Check your email 📩'} */}
          {i18next.t('common:emailValidationPage.checkYourEmail')}
        </h1>
        <p className="px-4 text-center text-black-100">
          {'We are glad, that you’re with us!'}
          <br />
          {
            "To ensure your account is secure, we've sent a verification link to the email address you have provided."
          }
        </p>
      </div>
      <Link
        href="/"
        className="inline-flex items-center gap-x-2 text-blue-700 hover:underline focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
      >
        <ArrowRightIcon className="-ml-0.5 h-5 w-5" aria-hidden="true" />
        {'Go back home'}
      </Link>
    </div>

Still a Junior Dev here, thanks for the help guys!