@carforyou/i18n NPM

CAR FOR YOU I18n

Shared I18n setup for Next.js applications

Usage

npm install @carforyou/i18n

Next.js/webpack config:

if (options.dev) {
  config.resolve.alias.rosetta = "rosetta/debug"
}

To mock useI18n in tests, add the following to a setup file. This can also be used inline in tests.

jest.mock("@carforyou/i18n", () => {
  const original = jest.requireActual("@carforyou/i18n")
  return {
    ...original,
    useI18n: jest.fn().mockReturnValue({
      t: jest.fn((key) => key),
      language: "en"
    }),
  }
})

In your project (preferrably server-side) pass the traslation files to the I18nProvider:

import { getDictionary, I18nProvider, useI18n } from "@carforyou/i18n"

import dictIT from "~/locales/it/app.json"
import dictFR from "~/locales/fr/app.json"
import dictEN from "~/locales/en/app.json"
import dictDE from "~/locales/de/app.json"

const dictionaries = {
  de: dictDE,
  fr: dictFR,
  it: dictIT,
  en: dictEN,
}

const onMissingTranslation = (error) => {
  if (typeof window !== "undefined") {
    import("~/lib/sentry").then((module) => {
      const Sentry = module.default
      Sentry.captureException(error)
    })
  }
}

const lngDict = await getDictionary({
  language,
  dictionaries,
  dictionaryScopes: ["requiredScope", "sharedScope"],
})

const Component = () => {
  const { t, language } = useI18n()

  return `${t("foo.bar")} ${language}`
}

<I18nProvider lngDict={lngDict} language={"en"} onMissingTranslation={onMissingTranslation}>
  <Component />
</I18nProvider>

Development

npm run build

You can link your local npm package to integrate it with any local project:

cd carforyou-i18n-pkg
npm run build

cd carforyou-listings-web
npm link ../carforyou-i18n-pkg

Release a new version

New versions are released on the ci using semantic-release as soon as you merge into master. Please make sure your merge commit message adheres to the corresponding conventions.