Next-i18next: Add use array for plugins

Created on 4 Dec 2018  路  7Comments  路  Source: isaachinman/next-i18next

Currently, users cannot implement plugins because next-i18next calls .init on the i18n instance, and plugins via .use must be called before .init.

We should add a use array to the next-i18next config, so that we can simply do:

config.use.forEach(x => i18n.use(x))
i18n.init() // Somewhere later on

Note that server/client detection will remain a responsibility of the user. Implementation might look like:

const NextI18Next = require('next-i18next').default

const use = []
if (process.browser) {
  use.push(someBrowserPlugin)
}

module.exports = new NextI18Next({ use })

core feature

Most helpful comment

Two liner solution: 14d494f.

We may in the future want to talk about removing the .use calls in create-i18next-client, but in my opinion they are a core part of the value added by using this package in the first place.

@lucasfeliciano, @mshahov, and @kachkaev - I would appreciate your help testing this solution out. I'm going to release v0.8.0 now.

All 7 comments

I really like this approach.
It is simple and don't have collateral effects on i18next.
Even tho I think i18next should introduce an opinionated option/API on plugin/middleware/detector level that tells where it should run would avoid a lot of boilerplate/configuration code.

But this is a topic for another time, I'm already pretty happy with the outcome of our brainstorm.

:)

I'm gonna implement this suggestion

@lucasfeliciano I'm already working on it, no need for a PR. I'll handle core features like this myself for the time being.

Perfect, thank you.

Two liner solution: 14d494f.

We may in the future want to talk about removing the .use calls in create-i18next-client, but in my opinion they are a core part of the value added by using this package in the first place.

@lucasfeliciano, @mshahov, and @kachkaev - I would appreciate your help testing this solution out. I'm going to release v0.8.0 now.

With use, ICU worked for me in v0.8.0!

// i18n.ts
import * as ICU from "i18next-icu";
import en from "i18next-icu/locale-data/en";
import ru from "i18next-icu/locale-data/ru";
import NextI18Next from "next-i18next";

const icu = new ICU({
  formats: {
    number: {
      PRICE: {
        minimumFractionDigits: 2,
        useGrouping: false,
      },
    },
  },
});
icu.addLocaleData(ru);
icu.addLocaleData(en);

const nextI18Next = new NextI18Next({
  defaultLanguage: "ru",
  otherLanguages: ["en"],
  localePath: "./locales",
  keySeparator: "###",
  use: [icu],
});

export default nextI18Next;

Now I should figure out how to configure custom language detectors and investigate https://github.com/isaachinman/next-i18next/issues/19 馃

Sorry for the late reply, super busy week.
I'll test during this weekend

@kachkaev Sorry for asking after a long time flew.

How did you solve the typescript types problem when you import i18next-icu?

Could not find a declaration file for module 'i18next-icu'. '/home/dev-nicelee/Desktop/pyconkr-web/node_modules/i18next-icu/index.js' implicitly has an 'any' type.
  Try `npm install @types/i18next-icu` if it exists or add a new declaration (.d.ts) file containing `declare module 'i18next-icu';`

Also, your code above sorts out the default language problem? https://github.com/isaachinman/next-i18next/issues/27

Was this page helpful?
0 / 5 - 0 ratings