nextjs with i18next and i18next-node-fs-backend - reactjs

Question

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?

Answer 1

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 : (() => {}),