nextjs with i18next and i18next-node-fs-backend

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?

SayJeyHi · Accepted Answer · 2019-08-05 20:19:33Z

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

answered Aug 5, 2019 at 20:19

SayJeyHi

1,8494 gold badges25 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

haotang Over a year ago

This is a solution. But it has the huge caveat that would slow down initial loading time of every SSR request as it has to wait for local file loading. So we need to consider carefully. Btw, I don't understand why next.js doesn't recognize fs module even in the server side.

Collectives™ on Stack Overflow

nextjs with i18next and i18next-node-fs-backend

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related