ni18n SSR broken in latest version of NextJS when setting locale manually

When trying to load translations on the server side from within getServerSideProps, the props are loaded into the store, but fail to be applied to the html. When the client takes over, the translations are loaded. This also causes a mismatch error when fallbackLng is set to supportedLngs as in the example.

The issue is present in a fresh vanilla NextJS installation with files as follows:

pages/_app.tsx

import '../styles/globals.css'
import type { AppProps } from 'next/app'
import { appWithI18Next, useSyncLanguage } from 'ni18n'
import { ni18nConfig } from '../ni18n.config'

const App = ({ Component, pageProps }: AppProps) => {
  useSyncLanguage('en')
  return <Component {...pageProps} />
}

export default appWithI18Next(App, ni18nConfig)

ni18n.config.ts

import type { Ni18nOptions } from 'ni18n'

const supportedLngs = ['es', 'en']

export const ni18nConfig: Ni18nOptions = {
  fallbackLng: supportedLngs,
  supportedLngs,
  ns: ['translation'],
  react: {
    useSuspense: false,
  },
}

pages/index.tsx

import Head from 'next/head'
import { useTranslation } from 'react-i18next'
import { loadTranslations } from 'ni18n'
import { ni18nConfig } from '../ni18n.config'
import { GetServerSideProps } from 'next'

export default function Home() {
  const { t } = useTranslation()
  return (
    <>
      <Head>
        <title>Test nI18n</title>
      </Head>
      <main>
        <div>
          <p>Hello!</p>
          <p>{t('key')}</p>
        </div>
      </main>
    </>
  )
}

export const getServerSideProps: GetServerSideProps = async (props) => {  
  return {
    props: {
      ...(await loadTranslations(ni18nConfig, props.locale, ['translation']))
    }
  }
}

It's worth noting that the prop ni18n_server is being loaded with the translations, but whatever I try, I've not been able to get SSR to pick them up.

__ni18n_server__: { resources: { es: [Object], en: [Object] }, ns: [ 'translation' ] }

As can be seen here, the SSR response shows 'key' instead of the text 'Translation in English'. Once the client takes over, the translation is corrected in the view and the error is displayed.

package.json as follows:

{
  "name": "n18n",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@next/font": "13.0.7",
    "@types/node": "18.11.17",
    "@types/react": "18.0.26",
    "@types/react-dom": "18.0.9",
    "i18next": "^22.4.6",
    "next": "13.0.7",
    "ni18n": "^1.0.5",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-i18next": "^12.1.1",
    "typescript": "4.9.4"
  }
}

Dec 22 '22 15:12 andycansdale

Try to downgrade your react-i18next@^12.1.1 into react-i18next@^12.0.0

Jan 03 '23 07:01 QuickAmethyst

Having this problem as well. Were you able to fix this, @andycansdale?

Update

Seems like @QuickAmethyst 's suggestion worked. @JCQuintas looks like there is a specific dependency version requirement with react-i18next to make it properly work with this library.

Mar 29 '23 20:03 bombillazo

@bombillazo can you send your package.json ?

Apr 04 '23 19:04 vladislavdev58

@vladislavdev58 just install the dependency with the exact version

    "react-i18next": "12.0.0",

Check the CHANGELOG for that package to see if it doesnt affect you having an older version from the latest one.

It would be interesting to see which version broke the compatibility...

Apr 04 '23 19:04 bombillazo

@bombillazo thanks, I had with ^ I am passing Spanish in loadTranslations and English is displayed. I am using the approach from the example - https://github.com/JCQuintas/ni18n/blob/main/examples/simple/pages/server-side-props.js. Was there such a problem? Did you use useSyncLanguage?

Apr 04 '23 20:04 vladislavdev58

I had exactly the same error and I just used the @bombillazo suggestion, use the exact version of the react-i18next. "react-i18next": "12.0.0",

Thank you!

P.S. But I think it's a temporary solution because the react-i18next will continue to growing if the next.js will change API later

Apr 09 '23 16:04 velidan

It seems someone reported a related problem in the react-i18next repo, possibly caused by the same bug. 👀 https://github.com/i18next/react-i18next/issues/1629

Apr 17 '23 22:04 bombillazo

Hi, as far as I can tell this seems to have been caused by a version of i18next. Make sure you are using the latest versions below. I won't add these to peerDependencies just now because it would be a breaking change, and I need more time to research.

    "i18next": ">=22.0.0",
    "react-i18next": ">= 12.0.0"

Apr 20 '23 22:04 JCQuintas

Make sure you are using the latest versions below.
    "react-i18next": ">= 12.0.0"

Hey JC. Unfortunately, using any version greater than [email protected] causes the problem. I am on the latest version of i18next with [email protected] and this was the only way to get it to work. I recommend using the exact version while the bug is fixed.

Apr 21 '23 13:04 bombillazo

Sorry, I misread, this is happening in development only. I was testing in production. Will try to debug it then

Apr 21 '23 13:04 JCQuintas

ni18n ni18n copied to clipboard

SSR broken in latest version of NextJS when setting locale manually

ni18n
ni18n copied to clipboard