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,17 @@
+const nextConfig = require("./next.config")
+
+/** @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}",
+      include: ["src/"],
+    },
+  ],
+}

next.config.mjs

@@ -19,3 +19,13 @@ export default withMDX({
     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"],
+    defaultLocale: "en",
+  },
+}

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}.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
+}