Hello,
I am developing an app in two languages, where the marketing website's content will be hosted on Prismic. Nonetheless, the content for the App will be in the codebase (same repository).
I have then started implementing the multilangual templating of prismic, which works fine after multiples overrides due to the requirement of having path with only language, not region (fr-ca --> .xyz Domain Names | Join Generation XYZ), but my issue is now to have it working with an external next i18n set up, such as next-i18next: https://www.i18next.com/
I am not able to make next-i18next detect automatically my locale, and end up staying forever on the per default locale.
Is this a use case Prismics' user already faced?
I guess am I not be the only one ine a situation where I'll need external translation system.
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!