Get minimal application running

Author: goanpeca

lingui.config.js

@@ -1,5 +1,7 @@
 const nextConfig = require('./next.config')
 
+console.log('nextConfig', nextConfig)
+
 /** @type {import('@lingui/conf').LinguiConfig} */
 module.exports = {
   locales: nextConfig.i18n.locales,
@@ -10,7 +12,8 @@ module.exports = {
   },
   catalogs: [
     {
-      path: 'src/locales/{locale}',
+      path: 'src/locales/{locale}/messages',
+      //   path: 'src/locales/{locale}',
       include: ['src/'],
     },
   ],

next.config.mjs

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

package.json

@@ -5,6 +5,7 @@
   "scripts": {
     "build-cards": "node build-cards.js",
     "extract": "lingui extract",
+    "compile": "lingui compile",
     "dev": "next dev",
     "build": "yarn extract && next build",
     "start": "next start",

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/en/messages.po

@@ -0,0 +1,83 @@
+msgid ""
+msgstr ""
+"POT-Creation-Date: 2020-04-04 13:38+0200\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/pages/examples.tsx:36
+#: src/pages/examples.tsx:48
+msgid "{value, plural, one {There's one book} other {There are # books}}"
+msgstr "{value, plural, one {There's one book} other {There are # books}}"
+
+#: src/pages/examples.tsx:18
+msgid "Black"
+msgstr "Black"
+
+#: src/pages/index.tsx:50
+msgid "Checkout LinguiJS examples and usecases."
+msgstr "Checkout LinguiJS examples and usecases."
+
+#: src/pages/examples.tsx:18
+msgid "Cyan"
+msgstr "Cyan"
+
+#: src/pages/index.tsx:36
+msgid "Documentation →"
+msgstr "Documentation →"
+
+#: src/components/Layout.tsx:23
+msgid "Example project using LinguiJS"
+msgstr "Example project using LinguiJS"
+
+#: src/pages/examples.tsx:26
+msgid "Examples"
+msgstr "Examples"
+
+#: src/pages/index.tsx:47
+msgid "Examples →"
+msgstr "Examples →"
+
+#: src/pages/index.tsx:39
+msgid "Find in-depth information about LinguiJS features and API."
+msgstr "Find in-depth information about LinguiJS features and API."
+
+#: pages/index.tsx:13
+#~ msgid "Get started by editing <0>locale/en/messages.po</0>"
+#~ msgstr "Get started by editing <0>locale/en/messages.po</0>"
+
+#: src/pages/index.tsx:28
+msgid "Get started by editing <0>locales/en.po</0>"
+msgstr "Get started by editing <0>locales/en.po</0>"
+
+#: src/pages/examples.tsx:18
+msgid "Magenta"
+msgstr "Magenta"
+
+#: src/pages/examples.tsx:30
+msgid "Plurals"
+msgstr "Plurals"
+
+#: src/components/Layout.tsx:41
+msgid "Powered by <0/>"
+msgstr "Powered by <0/>"
+
+#: src/pages/examples.tsx:57
+msgid "Translation outside of React components"
+msgstr "Translation outside of React components"
+
+#: src/pages/index.tsx:23
+msgid "Welcome to <0>LinguiJS!</0>"
+msgstr "Welcome to <0>LinguiJS!</0>"
+
+#: src/pages/examples.tsx:18
+msgid "Yellow"
+msgstr "Yellow"

src/i18n.ts

@@ -8,7 +8,7 @@ import { useEffect } from 'react'
  * 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}.po`)
+  const catalog = await import(`@lingui/loader!./locales/${locale}/messages.po`)
   return catalog.messages
 }
 

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={`/`}