CODEWITHSUNDEEP
reactjsnext.jsi18next
SayJeyHi
SayJeyHi

Reputation: 1841

nextjs with i18next and i18next-node-fs-backend

I am working on a multilingual site , with nextjs for SSR and i18next for making multi-language mechanism.

Due to using next SSR, I could not use i18next-xhr-backend and I should use i18next-node-fs-backend but in this case I figure out this error for fs : 

Module not found: Can't resolve 'fs' in '/Users/macbook/Desktop/project/node_modules/i18next-node-fs-backend/lib'

Is there any universal way to fetch i18next language json file?

Upvotes: 2

Views: 2555

Answers (1)

SayJeyHi
SayJeyHi

Reputation: 1841

After burning one day, I found how to do this. I use i18next-fetch-backend (actually with little edit in this library, which I'll send a PR), in my i18n.js componenet, add isomorphic-fetch as regular fetch API in config obj.

import i18n from 'i18next'
import Backend from 'i18next-fetch-backend'
import { initReactI18next } from 'react-i18next'
import fetch from 'isomorphic-fetch'

i18n
  .use(Backend)
  .use(initReactI18next)
  .init({
    lng: 'fa',
    backend: {
      /* translation file path */
      loadPath: '/static/i18n/{{ns}}/{{lng}}.json',
      fetch
    },
    fallbackLng: 'fa',
    debug: true,
    /* can have multiple namespace, in case you want to divide a huge translation into smaller pieces and load them on demand */
    ns: ['translations'],
    defaultNS: 'translations',
    keySeparator: false,
    interpolation: {
      escapeValue: false,
      formatSeparator: ','
    },
    react: {
      wait: true
    }
  })

export default i18n

for i18next-fetch-backend library I add below condition for default config , on line181 of i18next-fetch-backend.cjs.js file :

  fetch: typeof fetch === "function" ? fetch : (() => {}),

Upvotes: 1

Related Questions