Prismic Multilanguage - Next js - Marketing website + App


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:

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/'
import enFallback from '@/public/locales/en/en.fallback.json'
import frNs1 from '@/public/locales/fr/fr.common.json'
import frNs2 from '@/public/locales/fr/'

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

  debug: true,
  fallbackLng: 'en',
  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 = =>
  const locales =
    (lang) => localeOverrides[] ||

  return {
    reactStrictMode: true,
    swcMinify: true,
    images: {
 domains: [
    i18n: {
      // 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 📩'} */}
        <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."
        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'}

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

Hi @Marving,

Thanks for reaching out about this. I'm not sure just looking at this what the issue might be. Are you able to share your codebase with us? That would make things much easier for us to troubleshoot this. If you don't want to share your code publicly, you can send me a private message with a zip of your code or a link to github.


1 Like

Thanks for the help.
I was not able to make it work with next-i18next, so I went with and now the set up works fine.

Thank you!