0

It's been some days I'm trying to fix this problem but without success... I'm trying tu use next-i18next to get some translations keys coming from a CMS. We are in SSR, that why I use getServersSideProps. But got the ._nextI18Next.userConfig.use[0]returned fromgetServerSideProps` in "/" error. Do you guys got some ideas ? Am I on a bad way ? Thanks a lot for your time and your help.

Here is my next-i18next.config.js :

 /* eslint-disable @typescript-eslint/no-var-requires */
const i18nextHttpBackend = require('i18next-http-backend')
const i18nextBrowserLanguageDetector = require('i18next-browser-languagedetector')
const axios = require('axios')

module.exports = {
  i18n: {
    defaultLocale: 'default',
    locales: ['default', 'gb', 'fr']
  },
  use: [i18nextHttpBackend, i18nextBrowserLanguageDetector],
  debug: true,
  fallbackLng: 'fr',
  interpolation: {
    format: (value, format, lng) => {
      if (value instanceof Date) {
        return DateTime.fromJSDate(value).setLocale(lng).toLocaleString(DateTime[format])
      }
      return value
    }
  },
  backend: {
    loadPath: lng => {
      axios.get(`https://my_api_url/${lng}/formatted-transkeys`).then(res => {
        return JSON.stringify(res.data)
      })
    }
  },
  serializeConfig: false
}

My next.config.js :

/* eslint-disable @typescript-eslint/no-var-requires */
const { i18n } = require('./next-i18next.config')

const nextConfig = {
  distDir: 'dist',
  reactStrictMode: false,
  i18n,
  trailingSlash: true,
  images: {
    domains: ['d1m7xnn75ypr6t.cloudfront.net']
  }
}

module.exports = nextConfig

And my index.tsx :

interface i18nProps {
  locale: string
}
export const getServerSideProps = async (props: i18nProps) => {
  const result = await getHomePageData(props.locale)
  const data = result.data
  return {
    props: {
      data: data,
      ...(await serverSideTranslations(props.locale, ['search']))
    }
  }
}

export default Homepage

Trying to be as clear as I can, ask me everything you need.

Thanks,

R.

Memphi
  • 1

1 Answers1

0

try

const i18nextHttpBackend = require('i18next-http-backend/cjs')

instead of

const i18nextHttpBackend = require('i18next-http-backend')

and you need to pass the config here:

import nextI18NextConfig from '../next-i18next.config.js';
// ...

 ...(await serverSideTranslations(props.locale, ['search'], nextI18NextConfig))

Like described here: https://github.com/i18next/next-i18next#unserialisable-configs

compare it also with this example: https://github.com/i18next/i18next-http-backend/tree/master/example/next

adrai
  • 2,495
  • 1
  • 15
  • 18
  • No change.. Maybe I should put the full error description : Error: Error serializing `._nextI18Next.userConfig.use[0]` returned from `getServerSideProps` in "/". Reason: `function` cannot be serialized as JSON. Please only return JSON serializable data types. – Memphi Sep 23 '22 at 06:37
  • https://github.com/i18next/next-i18next#unserialisable-configs – adrai Sep 23 '22 at 08:33
  • compare with this example: https://github.com/i18next/i18next-http-backend/tree/master/example/next – adrai Sep 23 '22 at 08:33