Add i18n and 10n with lingui and babel

Author: goanpeca

.babelrc

@@ -0,0 +1,6 @@
+{
+  "presets": [
+    "next/babel"
+  ],
+  "plugins": ["@lingui/babel-plugin-lingui-macro"]
+}

lingui.config.js

@@ -0,0 +1,20 @@
+const nextConfig = require('./next.config')
+
+console.log('nextConfig', nextConfig)
+
+/** @type {import('@lingui/conf').LinguiConfig} */
+module.exports = {
+  locales: nextConfig.i18n.locales,
+  pseudoLocale: 'pseudo',
+  sourceLocale: nextConfig.i18n.defaultLocale,
+  fallbackLocales: {
+    default: 'en',
+  },
+  catalogs: [
+    {
+      path: 'src/locales/{locale}/messages',
+      //   path: 'src/locales/{locale}',
+      include: ['src/'],
+    },
+  ],
+}

next.config.mjs

@@ -18,4 +18,10 @@ export default withMDX({
   images: {
     domains: ["raw.githubusercontent.com", "numpy.org", "dask.org", "chainer.org", ],
   },
+  i18n: {
+    // These are all the locales you want to support in
+    // your application
+    locales: ["en", "es", "pt"],
+    defaultLocale: "en",
+  },
 })

package.json

@@ -4,8 +4,10 @@
   "private": true,
   "scripts": {
     "build-cards": "node build-cards.js",
+    "extract": "lingui extract",
+    "compile": "lingui compile",
     "dev": "next dev",
-    "build": "next build",
+    "build": "yarn extract && next build",
     "start": "next start",
     "lint": "next lint"
   },
@@ -24,6 +26,8 @@
     "@emotion/styled": "^11.13.0",
     "@fontsource-variable/inter": "^5.2.5",
     "@giscus/react": "^3.0.0",
+    "@lingui/core": "^5.0.0-next.2",
+    "@lingui/react": "^5.0.0-next.2",
     "@mdx-js/loader": "^3.0.1",
     "@mdx-js/react": "^3.0.1",
     "@next/mdx": "^14.2.14",
@@ -46,6 +50,9 @@
     "swr": "^2.2.5"
   },
   "devDependencies": {
+    "@lingui/babel-plugin-lingui-macro": "^5.0.0-next.2",
+    "@lingui/cli": "^5.0.0-next.2",
+    "@lingui/loader": "^5.0.0-next.2",
     "@types/react": "^18.3.11",
     "eslint": "^9.12.0",
     "eslint-config-next": "14.2.14",

src/components/layout.js

@@ -4,6 +4,8 @@ import { Header } from '@/components/header'
 import { Link } from '@/components/mdx'
 import { Box, Flex } from '@chakra-ui/react'
 import Head from 'next/head'
+import { Trans, useLingui } from '@lingui/react/macro'
+import { useRouter } from 'next/router'
 
 export const Layout = ({
   title,
@@ -13,7 +15,15 @@ export const Layout = ({
   url = 'https://xarray.dev',
   enableBanner = false,
 }) => {
-  const bannerTitle = 'Check out the new blog post on DataTree!'
+  /**
+   * This macro hook is needed to get `t` which
+   * is bound to i18n from React.Context
+   */
+  const { t } = useLingui()
+  const router = useRouter()
+  const { pathname, asPath, query } = router
+
+  const bannerTitle = t`Check out the new blog post on DataTree!`
   const bannerDescription = ''
   const bannerChildren = (
     <Link href='/blog/datatree'>

src/i18n.ts

@@ -0,0 +1,39 @@
+import { i18n, Messages } from '@lingui/core'
+import { useRouter } from 'next/router'
+import { useEffect } from 'react'
+
+/**
+ * Load messages for requested locale and activate it.
+ * This function isn't part of the LinguiJS library because there are
+ * many ways how to load messages — from REST API, from file, from cache, etc.
+ */
+export async function loadCatalog(locale: string) {
+  const catalog = await import(`@lingui/loader!./locales/${locale}/messages.po`)
+  return catalog.messages
+}
+
+export function useLinguiInit(messages: Messages) {
+  const router = useRouter()
+  const locale = router.locale || router.defaultLocale!
+  const isClient = typeof window !== 'undefined'
+
+  if (!isClient && locale !== i18n.locale) {
+    // there is single instance of i18n on the server
+    // note: on the server, we could have an instance of i18n per supported locale
+    // to avoid calling loadAndActivate for (worst case) each request, but right now that's what we do
+    i18n.loadAndActivate({ locale, messages })
+  }
+  if (isClient && !i18n.locale) {
+    // first client render
+    i18n.loadAndActivate({ locale, messages })
+  }
+
+  useEffect(() => {
+    const localeDidChange = locale !== i18n.locale
+    if (localeDidChange) {
+      i18n.loadAndActivate({ locale, messages })
+    }
+  }, [locale])
+
+  return i18n
+}

src/locales/en/messages.js

@@ -0,0 +1,18 @@
+msgid ""
+msgstr ""
+"POT-Creation-Date: 2025-05-01 08:03-0500\n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=utf-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"X-Generator: @lingui/cli\n"
+"Language: en\n"
+"Project-Id-Version: \n"
+"Report-Msgid-Bugs-To: \n"
+"PO-Revision-Date: \n"
+"Last-Translator: \n"
+"Language-Team: \n"
+"Plural-Forms: \n"
+
+#: src/components/layout.js:26
+msgid "Check out the new blog post on DataTree!"
+msgstr "Check out the new blog post on DataTree!"

src/locales/en/messages.po

@@ -0,0 +1,18 @@
+msgid ""
+msgstr ""
+"Project-Id-Version: \n"
+"Report-Msgid-Bugs-To: \n"
+"POT-Creation-Date: 2025-05-01 08:03-0500\n"
+"PO-Revision-Date: \n"
+"Last-Translator: \n"
+"Language-Team: \n"
+"Language: es\n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=utf-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"Plural-Forms: \n"
+"X-Generator: Poedit 3.6\n"
+
+#: src/components/layout.js:26
+msgid "Check out the new blog post on DataTree!"
+msgstr "¡Consulta la nueva publicación del blog sobre DataTree!"

src/locales/es/messages.js

@@ -0,0 +1,12 @@
+msgid ""
+msgstr ""
+"POT-Creation-Date: 2025-05-01 08:04-0500\n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=utf-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"X-Generator: @lingui/cli\n"
+"Language: pt\n"
+
+#: src/components/layout.js:26
+msgid "Check out the new blog post on DataTree!"
+msgstr ""

src/locales/es/messages.mo

@@ -1,11 +1,16 @@
+import { I18nProvider } from '@lingui/react'
+import { i18n } from '@lingui/core'
+
 import * as gtag from '@/lib/ga'
 import { customTheme } from '@/theme'
 import { ChakraProvider } from '@chakra-ui/react'
 import { useRouter } from 'next/router'
+import { useLinguiInit } from '../i18n'
 import Script from 'next/script'
 import { useEffect } from 'react'
 
 function MyApp({ Component, pageProps }) {
+  useLinguiInit(pageProps.translation)
   const router = useRouter()
   useEffect(() => {
     const handleRouteChange = (url) => {
@@ -20,29 +25,32 @@ function MyApp({ Component, pageProps }) {
   }, [router.events])
 
   return (
-    <ChakraProvider resetCSS theme={customTheme}>
-      {/* Google Tag Manager - Global base code */}
-      <Script
-        strategy='afterInteractive'
-        src={`https://www.googletagmanager.com/gtag/js?id=${gtag.GA_TRACKING_ID}`}
-      />
-      <Script
-        id='gtag-init'
-        strategy='afterInteractive'
-        dangerouslySetInnerHTML={{
-          __html: `
-            window.dataLayer = window.dataLayer || [];
-            function gtag(){dataLayer.push(arguments);}
-            gtag('js', new Date());
-            gtag('config', '${gtag.GA_TRACKING_ID}', {
-              page_path: window.location.pathname,
-            });
-          `,
-        }}
-      />
-
-      <Component {...pageProps} />
-    </ChakraProvider>
+    <>
+      <I18nProvider i18n={i18n}>
+        <ChakraProvider resetCSS theme={customTheme}>
+          {/* Google Tag Manager - Global base code */}
+          <Script
+            strategy='afterInteractive'
+            src={`https://www.googletagmanager.com/gtag/js?id=${gtag.GA_TRACKING_ID}`}
+          />
+          <Script
+            id='gtag-init'
+            strategy='afterInteractive'
+            dangerouslySetInnerHTML={{
+              __html: `
+              window.dataLayer = window.dataLayer || [];
+              function gtag(){dataLayer.push(arguments);}
+              gtag('js', new Date());
+              gtag('config', '${gtag.GA_TRACKING_ID}', {
+                page_path: window.location.pathname,
+              });
+            `,
+            }}
+          />
+          <Component {...pageProps} />
+        </ChakraProvider>
+      </I18nProvider>
+    </>
   )
 }
 

src/locales/es/messages.po

@@ -7,9 +7,22 @@ import {
   Sponsors,
 } from '@/components'
 
+import { useLingui } from '@lingui/react/macro'
+
 import { Layout } from '@/components/layout'
 
+import { loadCatalog } from '../i18n'
+
+export const getStaticProps = async (ctx) => {
+  const translation = await loadCatalog(ctx.locale)
+  return {
+    props: {
+      translation,
+    },
+  }
+}
 export default function IndexPage() {
+  const { t } = useLingui()
   return (
     <Layout
       url={`/`}