@carforyou/i18n

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.

Circle CI

You will need to enable the repository in circle CI ui to be able to build it.

For slack notifications to work you will need to provide the token in circle settings.