chore: load i18n translations using lingui provider

5 files changed, 110 insertions, 2 deletions

diff --git a/src/components/Branding/Branding.tsx b/src/components/Branding/Branding.tsx
index e5565a4..a8adf9b 100644
--- a/src/components/Branding/Branding.tsx
+++ b/src/components/Branding/Branding.tsx
@@ -12,7 +12,14 @@ const Branding: BrandingReturn = ({ isHome = false }) => {
   return (
     <div className={styles.wrapper}>
       <div className={styles.logo}>
-        <Image src={photo} alt={t`${config.name} picture`} layout="intrinsic" />
+        <Image
+          src={photo}
+          alt={t({
+            message: `${config.name} picture`,
+            comment: 'Branding logo.',
+          })}
+          layout="intrinsic"
+        />
       </div>
       {isHome ? (
         <h1 className={styles.name}>
diff --git a/src/i18n/fr/messages.po b/src/i18n/fr/messages.po
new file mode 100644
index 0000000..a05ea8e
--- /dev/null
+++ b/src/i18n/fr/messages.po
@@ -0,0 +1,23 @@
+msgid ""
+msgstr ""
+"POT-Creation-Date: 2021-12-13 12:10+0100\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: fr\n"
+"Project-Id-Version: \n"
+"Report-Msgid-Bugs-To: \n"
+"PO-Revision-Date: \n"
+"Last-Translator: \n"
+"Language-Team: \n"
+"Plural-Forms: \n"
+
+#: src/config/website.ts:5
+msgid "Front-end developer"
+msgstr ""
+
+#. Branding logo.
+#: src/components/Branding/Branding.tsx:17
+msgid "{0} picture"
+msgstr ""
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 8194b10..fde93eb 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -1,9 +1,37 @@
+import { useEffect, useRef } from 'react';
+import { useRouter } from 'next/router';
+import { i18n } from '@lingui/core';
+import { I18nProvider } from '@lingui/react';
 import { AppPropsWithLayout } from '@ts/types/app';
+import { initTranslation } from '@utils/helpers/i18n';
 import '../styles/globals.scss';
 
+initTranslation(i18n);
+
 function MyApp({ Component, pageProps }: AppPropsWithLayout) {
+  const router = useRouter();
+  const locale: string = router.locale || router.defaultLocale!;
+  const firstRender = useRef(true);
+
+  if (pageProps.translation && firstRender.current) {
+    i18n.load(locale, pageProps.translation);
+    i18n.activate(locale);
+    firstRender.current = false;
+  }
+
+  useEffect(() => {
+    if (pageProps.translation) {
+      i18n.load(locale, pageProps.translation);
+      i18n.activate(locale);
+    }
+  }, [locale, pageProps.translation]);
+
   const getLayout = Component.getLayout ?? ((page) => page);
-  return getLayout(<Component {...pageProps} />);
+  return (
+    <I18nProvider i18n={i18n}>
+      {getLayout(<Component {...pageProps} />)}
+    </I18nProvider>
+  );
 }
 
 export default MyApp;
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 6022497..615fe0a 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,5 +1,7 @@
 import Layout from '@components/Layouts/Layout';
 import { NextPageWithLayout } from '@ts/types/app';
+import { loadTranslation } from '@utils/helpers/i18n';
+import { GetStaticProps } from 'next';
 import Head from 'next/head';
 import Image from 'next/image';
 import type { ReactElement } from 'react';
@@ -75,4 +77,17 @@ Home.getLayout = function getLayout(page: ReactElement) {
   return <Layout>{page}</Layout>;
 };
 
+export const getStaticProps: GetStaticProps = async (ctx) => {
+  const translation = await loadTranslation(
+    ctx.locale!,
+    process.env.NODE_ENV === 'production'
+  );
+
+  return {
+    props: {
+      translation,
+    },
+  };
+};
+
 export default Home;
diff --git a/src/utils/helpers/i18n.ts b/src/utils/helpers/i18n.ts
new file mode 100644
index 0000000..38616a2
--- /dev/null
+++ b/src/utils/helpers/i18n.ts
@@ -0,0 +1,35 @@
+import type { I18n } from '@lingui/core';
+import { en, fr } from 'make-plural/plurals';
+
+export interface LocaleData {
+  messages: object;
+  default: object;
+}
+
+export const locales = {
+  en: 'English',
+  fr: 'Français',
+};
+
+export const defaultLocale = 'fr';
+
+export function initTranslation(i18n: I18n): void {
+  i18n.loadLocaleData({
+    en: { plurals: en },
+    fr: { plurals: fr },
+  });
+}
+
+export async function loadTranslation(
+  locale: string,
+  isProduction: boolean = true
+) {
+  let data: LocaleData;
+  if (isProduction) {
+    data = await import(`src/i18n/${locale}/messages`);
+  } else {
+    data = await import(`@lingui/loader!src/i18n/${locale}/messages.po`);
+  }
+
+  return data.messages;
+}