jsLingui VS i18next

As we mentioned earlier, the Next.js works well with existing i18n libraries (react-intl, lingui, next-intl, and similar). In this tutorial, we will use the react-intl.

We use LinguiJS on a medium sized project and find it to work really well. It’s small, supports multiple message formats, has CLI scripts for extracting message ids from source, JS apis, Babel macros, React components and hooks, webpack and snowpack plugins, good pluralization support and much more.

I really like https://lingui.js.org/. It will create the .json or .po for you. And the component is just 😍.

I'm a fan of Lingui. I use it for instant.bible.

Lingui JS

lingui

import I18NextVue from 'i18next-vue' import i18next from 'i18next' import Backend from 'i18next-locize-backend' import LanguageDetector from 'i18next-browser-languagedetector' import LastUsed from 'locize-lastused' import { locizePlugin } from 'locize' const isProduction = process.env.NODE_ENV === 'production' const locizeOptions = { projectId: process.env.VUE_APP_LOCIZE_PROJECTID, apiKey: process.env.VUE_APP_LOCIZE_APIKEY, // YOU should not expose your apps API key to production!!! version: process.env.VUE_APP_LOCIZE_VERSION } if (!isProduction) { // locize-lastused // sets a timestamp of last access on every translation segment on locize // -> safely remove the ones not being touched for weeks/months // https://github.com/locize/locize-lastused i18next.use(LastUsed); } export const i18nextPromise = i18next // locize-editor // InContext Editor of locize .use(locizePlugin) // i18next-locize-backend // loads translations from your project, saves new keys to it (saveMissing: true) // https://github.com/locize/i18next-locize-backend .use(Backend) // detect user language // learn more: https://github.com/i18next/i18next-browser-languageDetector .use(LanguageDetector) // init i18next // for all options read: https://www.i18next.com/overview/configuration-options .init({ debug: !isProduction, fallbackLng: 'en', saveMissing: !isProduction, backend: locizeOptions, locizeLastUsed: locizeOptions }) export default function (app) { app.use(I18NextVue, { i18next }) return app }

Now that you have internationalization set up for your Strapi project, it’s time to do the same in your Next.js app. For this part of the tutorial, you’ll be using a library called next-i18next. This library is built on i18next, a popular internationalization framework offering support for many frameworks, like React, Next.js, PHP, and .NET.

I18next [MIT] https://www.i18next.com/

Let's take the example of next-i18next. While next-i18next uses i18next and react-i18next under the hood, users of next-i18next simply need to include their translation content as JSON files and don't have to worry about much else.

import { useTranslation } from "next-i18next"; import React from "react"; const BuiltInFormatsDemo = () => { const { t } = useTranslation("built-in-demo"); return (

{/* "number": "Number: {{val, number}}", */} {t("number", { val: 123456789.0123, })} p>

{/* "currency": "Currency: {{val, currency}}", */} {t("currency", { val: 123456789.0123, style: "currency", currency: "USD", })} p>

{/* "dateTime": "Date/Time: {{val, datetime}}", */} {t("dateTime", { val: new Date(1234567890123), formatParams: { val: { weekday: "long", year: "numeric", month: "long", day: "numeric", }, }, })} p>

{/* "relativeTime": "Relative Time: {{val, relativetime}}", */} {t("relativeTime", { val: 12, style: "long", })} p>

{/* "list": "List: {{val, list}}", */} {t("list", { // https://www.i18next.com/translation-function/objects-and-arrays#objects // Check the link for more details on `returnObjects` val: t("weekdays", { returnObjects: true }), })} p> div> ); }; export default BuiltInFormatsDemo;

i18next: i18next is the dependency used for rendering translations within Kazoo-web

import { hydrate } from 'react-dom' import { RemixBrowser } from 'remix' import i18next from 'i18next' import LanguageDetector from 'i18next-browser-languagedetector' import { initReactI18next } from 'react-i18next' import Backend from 'i18next-locize-backend' import LastUsed from 'locize-lastused' import { locizePlugin } from 'locize' import i18nextOptions from './i18nextOptions' const isProduction = process.env.NODE_ENV === 'production' const locizeOptions = { projectId: 'f6d74b76-9677-4a0d-b400-86e1507397ab', apiKey: !isProduction ? '1c2bbc21-027d-4f41-995a-e8beb451cdef' : undefined, // YOU should not expose your apps API key to production!!! version: isProduction ? 'production' : 'latest' } if (!isProduction) { // locize-lastused // sets a timestamp of last access on every translation segment on locize // -> safely remove the ones not being touched for weeks/months // https://github.com/locize/locize-lastused i18next.use(LastUsed) } // initialize i18next using initReactI18next and configuring it if (!i18next.isInitialized) { // prevent i18next to be initialized multiple times i18next // locize-editor // InContext Editor of locize .use(locizePlugin) // i18next-locize-backend // loads translations from your project, saves new keys to it (saveMissing: true) // https://github.com/locize/i18next-locize-backend .use(Backend) // detect user language // learn more: https://github.com/i18next/i18next-browser-languageDetector .use(LanguageDetector) // pass the i18n instance to react-i18next. .use(initReactI18next) // init i18next // for all options read: https://www.i18next.com/overview/configuration-options .init({ ...i18nextOptions, detection: { caches: ['cookie'], lookupCookie: 'i18next' }, backend: locizeOptions, locizeLastUsed: locizeOptions, saveMissing: !isProduction // you should not use saveMissing in production }) .then(() => { // then hydrate your app wrapped in the RemixI18NextProvider return hydrate( , document ) }) }

When it comes to JavaScript localization. One of the most popular frameworks is i18next. One of the most famous Remix module for i18next is remix-i18next. It was created in October 2021 by Sergio Xalambrí.

Looking at the history of the currently most used i18n format, we can see the the creators of i18next are also the founders of a great translation management system. So with choosing locize you directly support the future of i18next. ➡️ i18next + locize = true continuous localization

Depending on the stack you would translate the keys inserted in a template before it's sent to the browser, or if it's FE, then you would use something like https://www.i18next.com/ and in your templates you would use a translation function, which will have the string key as argument.