Next14 + app router - Error: Text content does not match server-rendered HTML.

[TomBell95]

I have followed the Next14 app directory guide and this works great. However, when I open my app with .../fr/... in the URL, rather than .../en/... (which is the fallback language) - i get Uncaught Error: Text content does not match server-rendered HTML.

Any ideas/suggestions? When swapping between the locales, there is no issue. It is just on the initial load as the server has en whereas the client has fr

/i18n/index.ts

import { createInstance, i18n as I18nInstance, TFunction } from 'i18next'
import resourcesToBackend from 'i18next-resources-to-backend'
import { initReactI18next } from 'react-i18next/initReactI18next'
import { getOptions, LanguageOptionsType } from './settings'

const initI18next = async (
  language: LanguageOptionsType,
  namespace: string,
): Promise<I18nInstance> => {
  const i18nInstance = createInstance()

  await i18nInstance
    .use(initReactI18next)
    .use(resourcesToBackend((lng: string, ns: string) => import(`./locales/${lng}/${ns}.json`)))
    .init(getOptions(language, namespace))

  return i18nInstance
}

export async function useServerSideTranslation(
  language: LanguageOptionsType,
  namespace: string,
  options: { keyPrefix?: string } = {},
): Promise<{ t: TFunction; i18n: I18nInstance }> {
  const i18nextInstance = await initI18next(language, namespace)

  return {
    t: i18nextInstance.getFixedT(language, namespace, options.keyPrefix),
    i18n: i18nextInstance,
  }
}

export default initI18next

/i18n/client.ts

/* eslint-disable react-hooks/rules-of-hooks */
'use client'

import i18next from 'i18next'
import LanguageDetector from 'i18next-browser-languagedetector'
import resourcesToBackend from 'i18next-resources-to-backend'
import { useEffect, useState } from 'react'
import { useCookies } from 'react-cookie'
import {
  initReactI18next,
  UseTranslationOptions,
  useTranslation as useTranslationOrg,
} from 'react-i18next'
import { getOptions, i18nCookieName, LanguageOptionsType, supportedLngs } from './settings'

const runsOnServerSide = typeof window === 'undefined'

i18next
  .use(initReactI18next)
  .use(LanguageDetector)
  .use(
    resourcesToBackend(
      (language: string, namespace: string) => import(`./locales/${language}/${namespace}.json`),
    ),
  )
  .init({
    ...getOptions(),
    nsSeparator: false, 
    lng: undefined,
    detection: {
      order: ['path', 'htmlTag', 'cookie', 'navigator'],
    },
    preload: runsOnServerSide ? supportedLngs : [],
    backend: {
      loadPath: './locales/{{lng}}/{{ns}}.json', 
    },
  })

export function useTranslationClient(
  lng: LanguageOptionsType | undefined,
  ns: string | string[],
  options?: UseTranslationOptions<undefined>,
) {
  const [cookies, setCookie] = useCookies([i18nCookieName])
  const { t, i18n } = useTranslationOrg(ns, { ...options, nsMode: 'fallback' })

  const [activeLng, setActiveLng] = useState(i18n.resolvedLanguage)

  useEffect(() => {
    if (runsOnServerSide) {
      return
    }

    if (lng && i18n.resolvedLanguage !== lng) {
      i18n.changeLanguage(lng)
    }
  }, [lng, i18n])

  useEffect(() => {
    if (activeLng !== i18n.resolvedLanguage) {
      setActiveLng(i18n.resolvedLanguage)
    }
  }, [activeLng, i18n.resolvedLanguage])

  useEffect(() => {
    if (cookies.i18next !== lng && lng) {
      setCookie(i18nCookieName, lng, { path: '/' })
    }
  }, [lng, cookies.i18next, setCookie])

  return { t, i18n }
}

export default i18next

/i18n/settings.ts

export type LanguageOptionsType = 'en' | 'fr'
export enum LanguageTextMap {
  en = 'English',
  fr = 'Français',
}
export const languageLocaleMap: Record<LanguageOptionsType, string> = {
  en: 'en_GB',
  fr: 'fr_FR',
}

export const fallbackLng: LanguageOptionsType = 'en'
export const supportedLngs: LanguageOptionsType[] = [fallbackLng, 'fr']
export const defaultNS = 'common'
export const i18nCookieName = 'i18next'

export function getOptions(lng = fallbackLng, ns = defaultNS) {
  return {
    supportedLngs,
    fallbackLng,
    lng,
    fallbackNS: defaultNS,
    defaultNS,
    ns,
  }
}

export const getLanguageFromParams = (lng?: string): LanguageOptionsType =>
  (supportedLngs.includes(lng as LanguageOptionsType) ? lng : fallbackLng) as LanguageOptionsType

Server example

'use server'

import { useServerSideTranslation } from '@/i18n'
import { getLanguageFromParams } from '@/i18n/settings'

export default async function Page({ params }: { params: { lng?: string } }) {
  const language = getLanguageFromParams(params.lng)
  const { t } = await useServerSideTranslation(language, 'pages/auth/login')

  return (
    <main>
      <h1>{t('title')}</h1>
      <LoginForm language={language} />
    </main>
  )
}

Client example

'use client'

const LoginForm = ({ language }: { language: LanguageOptionsType }) => {

  const { t } = useTranslationClient(language, [
    'pages/auth/login',
  ])
  
  ...
  t('emailAddress') // 'Email address' or 'Adresse e-mail'

[TomBell95]

simple fix to my above mistake

export function useTranslationClient(
  lng: LanguageOptionsType | undefined,
  ns: string | string[],
  options?: UseTranslationOptions<undefined>,
) {
...
  const { t, i18n } = useTranslationOrg(ns, { ...options, lng, nsMode: 'fallback' }) // <--- ensure to pass in lng

[TomBell95]

simple fix to my above mistake

export function useTranslationClient(
  lng: LanguageOptionsType | undefined,
  ns: string | string[],
  options?: UseTranslationOptions<undefined>,
) {
...
  const { t, i18n } = useTranslationOrg(ns, { ...options, lng, nsMode: 'fallback' }) // <--- ensure to pass in lng

This causes the app to get stuck in an infinite loop

[TomBell95]

@adrai any suggestions on this ?

[adrai]

Please fork this repository and try to reproduce it... if you see a problem with it, please create an issue.