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!"