fix: handle translation with lingui

The previous method was not working so I tried a different approach.
Translation is loaded but I'm still getting warnings:
* Plurals for locale undefined aren't loaded
* Text content did not match
I can't figure how to fix them...

13 files changed, 69 insertions, 91 deletions

diff --git a/src/pages/404.tsx b/src/pages/404.tsx
index 2c20578..5ba7b95 100644
--- a/src/pages/404.tsx
+++ b/src/pages/404.tsx
@@ -3,7 +3,7 @@ import PostHeader from '@components/PostHeader/PostHeader';
 import { seo } from '@config/seo';
 import { t, Trans } from '@lingui/macro';
 import { NextPageWithLayout } from '@ts/types/app';
-import { loadTranslation } from '@utils/helpers/i18n';
+import { defaultLocale, loadTranslation } from '@utils/helpers/i18n';
 import { GetStaticProps, GetStaticPropsContext } from 'next';
 import Head from 'next/head';
 import Link from 'next/link';
@@ -38,16 +38,14 @@ error404.getLayout = getLayout;
 export const getStaticProps: GetStaticProps = async (
   context: GetStaticPropsContext
 ) => {
-  const translation = await loadTranslation(
-    context.locale!,
-    process.env.NODE_ENV === 'production'
-  );
-
   const breadcrumbTitle = t`Error`;
+  const { locale } = context;
+  const translation = await loadTranslation(locale || defaultLocale);
 
   return {
     props: {
       breadcrumbTitle,
+      locale,
       translation,
     },
   };
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index a22c616..db021f9 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -1,31 +1,19 @@
-import { useEffect, useRef } from 'react';
-import { useRouter } from 'next/router';
+import { useEffect } from 'react';
 import { i18n } from '@lingui/core';
 import { I18nProvider } from '@lingui/react';
 import { AppPropsWithLayout } from '@ts/types/app';
-import { initTranslation } from '@utils/helpers/i18n';
+import { activateLocale, defaultLocale, initLingui } from '@utils/helpers/i18n';
 import '../styles/globals.scss';
 import { ThemeProvider } from 'next-themes';
 
-initTranslation(i18n);
+initLingui(defaultLocale);
 
-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;
-  }
+const MyApp = ({ Component, pageProps }: AppPropsWithLayout) => {
+  const locale: string = pageProps.locale || defaultLocale;
 
   useEffect(() => {
-    if (pageProps.translation) {
-      i18n.load(locale, pageProps.translation);
-      i18n.activate(locale);
-    }
-  }, [locale, pageProps.translation]);
+    activateLocale(locale, pageProps.translation);
+  });
 
   const getLayout = Component.getLayout ?? ((page) => page);
   return (
@@ -39,6 +27,6 @@ function MyApp({ Component, pageProps }: AppPropsWithLayout) {
       </ThemeProvider>
     </I18nProvider>
   );
-}
+};
 
 export default MyApp;
diff --git a/src/pages/article/[slug].tsx b/src/pages/article/[slug].tsx
index c9aedb8..d38ff63 100644
--- a/src/pages/article/[slug].tsx
+++ b/src/pages/article/[slug].tsx
@@ -7,7 +7,7 @@ import { config } from '@config/website';
 import { getAllPostsSlug, getPostBySlug } from '@services/graphql/queries';
 import { NextPageWithLayout } from '@ts/types/app';
 import { ArticleMeta, ArticleProps } from '@ts/types/articles';
-import { loadTranslation } from '@utils/helpers/i18n';
+import { defaultLocale, loadTranslation } from '@utils/helpers/i18n';
 import { addPrismClasses, translateCopyButton } from '@utils/helpers/prism';
 import { GetStaticPaths, GetStaticProps, GetStaticPropsContext } from 'next';
 import Head from 'next/head';
@@ -162,10 +162,8 @@ interface PostParams extends ParsedUrlQuery {
 export const getStaticProps: GetStaticProps = async (
   context: GetStaticPropsContext
 ) => {
-  const translation = await loadTranslation(
-    context.locale!,
-    process.env.NODE_ENV === 'production'
-  );
+  const { locale } = context;
+  const translation = await loadTranslation(locale || defaultLocale);
   const { slug } = context.params as PostParams;
   const post = await getPostBySlug(slug);
   const breadcrumbTitle = post.title;
@@ -173,6 +171,7 @@ export const getStaticProps: GetStaticProps = async (
   return {
     props: {
       breadcrumbTitle,
+      locale,
       post,
       translation,
     },
diff --git a/src/pages/blog/index.tsx b/src/pages/blog/index.tsx
index e0d1485..0650cfb 100644
--- a/src/pages/blog/index.tsx
+++ b/src/pages/blog/index.tsx
@@ -1,4 +1,4 @@
-import { GetStaticProps } from 'next';
+import { GetStaticProps, GetStaticPropsContext } from 'next';
 import Head from 'next/head';
 import { t } from '@lingui/macro';
 import { getLayout } from '@components/Layouts/Layout';
@@ -6,7 +6,7 @@ import { seo } from '@config/seo';
 import { config } from '@config/website';
 import { NextPageWithLayout } from '@ts/types/app';
 import { BlogPageProps, PostsList as PostsListData } from '@ts/types/blog';
-import { loadTranslation } from '@utils/helpers/i18n';
+import { defaultLocale, loadTranslation } from '@utils/helpers/i18n';
 import PostsList from '@components/PostsList/PostsList';
 import useSWRInfinite from 'swr/infinite';
 import { Button } from '@components/Buttons';
@@ -161,13 +161,13 @@ const Blog: NextPageWithLayout<BlogPageProps> = ({ fallback }) => {
 
 Blog.getLayout = getLayout;
 
-export const getStaticProps: GetStaticProps = async (context) => {
-  const translation = await loadTranslation(
-    context.locale!,
-    process.env.NODE_ENV === 'production'
-  );
-  const data = await getPublishedPosts({ first: config.postsPerPage });
+export const getStaticProps: GetStaticProps = async (
+  context: GetStaticPropsContext
+) => {
   const breadcrumbTitle = t`Blog`;
+  const data = await getPublishedPosts({ first: config.postsPerPage });
+  const { locale } = context;
+  const translation = await loadTranslation(locale || defaultLocale);
 
   return {
     props: {
@@ -175,6 +175,7 @@ export const getStaticProps: GetStaticProps = async (context) => {
       fallback: {
         '/api/posts': data,
       },
+      locale,
       translation,
     },
   };
diff --git a/src/pages/contact.tsx b/src/pages/contact.tsx
index 66f4f9e..cb88b7d 100644
--- a/src/pages/contact.tsx
+++ b/src/pages/contact.tsx
@@ -5,7 +5,7 @@ import { seo } from '@config/seo';
 import { t } from '@lingui/macro';
 import { sendMail } from '@services/graphql/mutations';
 import { NextPageWithLayout } from '@ts/types/app';
-import { loadTranslation } from '@utils/helpers/i18n';
+import { defaultLocale, loadTranslation } from '@utils/helpers/i18n';
 import { GetStaticProps, GetStaticPropsContext } from 'next';
 import Head from 'next/head';
 import { FormEvent, useState } from 'react';
@@ -176,16 +176,14 @@ ContactPage.getLayout = getLayout;
 export const getStaticProps: GetStaticProps = async (
   context: GetStaticPropsContext
 ) => {
-  const translation = await loadTranslation(
-    context.locale!,
-    process.env.NODE_ENV === 'production'
-  );
-
   const breadcrumbTitle = t`Contact`;
+  const { locale } = context;
+  const translation = await loadTranslation(locale || defaultLocale);
 
   return {
     props: {
       breadcrumbTitle,
+      locale,
       translation,
     },
   };
diff --git a/src/pages/cv.tsx b/src/pages/cv.tsx
index 47093c4..85bddd6 100644
--- a/src/pages/cv.tsx
+++ b/src/pages/cv.tsx
@@ -1,7 +1,6 @@
 import { getLayout } from '@components/Layouts/Layout';
 import { seo } from '@config/seo';
 import { NextPageWithLayout } from '@ts/types/app';
-import { loadTranslation } from '@utils/helpers/i18n';
 import { GetStaticProps, GetStaticPropsContext } from 'next';
 import Head from 'next/head';
 import CVContent, { intro, meta, pdf, image } from '@content/pages/cv.mdx';
@@ -14,6 +13,7 @@ import Sidebar from '@components/Sidebar/Sidebar';
 import { AboutPage, Graph, WebPage } from 'schema-dts';
 import { config } from '@config/website';
 import { useRouter } from 'next/router';
+import { defaultLocale, loadTranslation } from '@utils/helpers/i18n';
 
 const CV: NextPageWithLayout = () => {
   const router = useRouter();
@@ -111,15 +111,14 @@ CV.getLayout = getLayout;
 export const getStaticProps: GetStaticProps = async (
   context: GetStaticPropsContext
 ) => {
-  const translation = await loadTranslation(
-    context.locale!,
-    process.env.NODE_ENV === 'production'
-  );
   const breadcrumbTitle = meta.title;
+  const { locale } = context;
+  const translation = await loadTranslation(locale || defaultLocale);
 
   return {
     props: {
       breadcrumbTitle,
+      locale,
       translation,
     },
   };
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index bc89334..ae5fe4b 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,10 +1,10 @@
 import type { ReactElement } from 'react';
-import { GetStaticProps } from 'next';
+import { GetStaticProps, GetStaticPropsContext } from 'next';
 import Head from 'next/head';
 import Layout from '@components/Layouts/Layout';
 import { seo } from '@config/seo';
 import { NextPageWithLayout } from '@ts/types/app';
-import { loadTranslation } from '@utils/helpers/i18n';
+import { defaultLocale, loadTranslation } from '@utils/helpers/i18n';
 import HomePageContent from '@content/pages/homepage.mdx';
 import { ButtonLink } from '@components/Buttons';
 import styles from '@styles/pages/Home.module.scss';
@@ -137,14 +137,15 @@ Home.getLayout = function getLayout(page: ReactElement) {
   return <Layout isHome={true}>{page}</Layout>;
 };
 
-export const getStaticProps: GetStaticProps = async (ctx) => {
-  const translation = await loadTranslation(
-    ctx.locale!,
-    process.env.NODE_ENV === 'production'
-  );
+export const getStaticProps: GetStaticProps = async (
+  context: GetStaticPropsContext
+) => {
+  const { locale } = context;
+  const translation = await loadTranslation(locale || defaultLocale);
 
   return {
     props: {
+      locale,
       translation,
     },
   };
diff --git a/src/pages/mentions-legales.tsx b/src/pages/mentions-legales.tsx
index ac587f0..c9d2ccd 100644
--- a/src/pages/mentions-legales.tsx
+++ b/src/pages/mentions-legales.tsx
@@ -1,7 +1,7 @@
 import { getLayout } from '@components/Layouts/Layout';
 import { seo } from '@config/seo';
 import { NextPageWithLayout } from '@ts/types/app';
-import { loadTranslation } from '@utils/helpers/i18n';
+import { defaultLocale, loadTranslation } from '@utils/helpers/i18n';
 import { GetStaticProps, GetStaticPropsContext } from 'next';
 import Head from 'next/head';
 import LegalNoticeContent, {
@@ -105,15 +105,14 @@ LegalNotice.getLayout = getLayout;
 export const getStaticProps: GetStaticProps = async (
   context: GetStaticPropsContext
 ) => {
-  const translation = await loadTranslation(
-    context.locale!,
-    process.env.NODE_ENV === 'production'
-  );
   const breadcrumbTitle = meta.title;
+  const { locale } = context;
+  const translation = await loadTranslation(locale || defaultLocale);
 
   return {
     props: {
       breadcrumbTitle,
+      locale,
       translation,
     },
   };
diff --git a/src/pages/projet/[slug].tsx b/src/pages/projet/[slug].tsx
index b6a9cf2..847f84c 100644
--- a/src/pages/projet/[slug].tsx
+++ b/src/pages/projet/[slug].tsx
@@ -11,7 +11,7 @@ import {
   Project as ProjectData,
   ProjectProps,
 } from '@ts/types/app';
-import { loadTranslation } from '@utils/helpers/i18n';
+import { defaultLocale, loadTranslation } from '@utils/helpers/i18n';
 import {
   getAllProjectsFilename,
   getProjectData,
@@ -131,17 +131,16 @@ interface ProjectParams extends ParsedUrlQuery {
 export const getStaticProps: GetStaticProps = async (
   context: GetStaticPropsContext
 ) => {
-  const translation = await loadTranslation(
-    context.locale!,
-    process.env.NODE_ENV === 'production'
-  );
   const breadcrumbTitle = '';
+  const { locale } = context;
+  const translation = await loadTranslation(locale || defaultLocale);
   const { slug } = context.params as ProjectParams;
   const project = await getProjectData(slug);
 
   return {
     props: {
       breadcrumbTitle,
+      locale,
       project,
       translation,
     },
diff --git a/src/pages/projets.tsx b/src/pages/projets.tsx
index 1a83326..4359721 100644
--- a/src/pages/projets.tsx
+++ b/src/pages/projets.tsx
@@ -6,7 +6,7 @@ import { config } from '@config/website';
 import PageContent, { meta } from '@content/pages/projects.mdx';
 import styles from '@styles/pages/Projects.module.scss';
 import { Project } from '@ts/types/app';
-import { loadTranslation } from '@utils/helpers/i18n';
+import { defaultLocale, loadTranslation } from '@utils/helpers/i18n';
 import { getSortedProjects } from '@utils/helpers/projects';
 import { GetStaticProps, GetStaticPropsContext } from 'next';
 import Head from 'next/head';
@@ -89,16 +89,15 @@ Projects.getLayout = getLayout;
 export const getStaticProps: GetStaticProps = async (
   context: GetStaticPropsContext
 ) => {
-  const translation = await loadTranslation(
-    context.locale!,
-    process.env.NODE_ENV === 'production'
-  );
   const breadcrumbTitle = meta.title;
+  const { locale } = context;
   const projects: Project[] = await getSortedProjects();
+  const translation = await loadTranslation(locale || defaultLocale);
 
   return {
     props: {
       breadcrumbTitle,
+      locale,
       projects,
       translation,
     },
diff --git a/src/pages/recherche/index.tsx b/src/pages/recherche/index.tsx
index f497ca3..7f410e8 100644
--- a/src/pages/recherche/index.tsx
+++ b/src/pages/recherche/index.tsx
@@ -7,8 +7,7 @@ import { t } from '@lingui/macro';
 import { getPublishedPosts } from '@services/graphql/queries';
 import { NextPageWithLayout } from '@ts/types/app';
 import { PostsList as PostsListData } from '@ts/types/blog';
-import { loadTranslation } from '@utils/helpers/i18n';
-import { GetStaticProps } from 'next';
+import { GetStaticProps, GetStaticPropsContext } from 'next';
 import Head from 'next/head';
 import { useRouter } from 'next/router';
 import { useEffect, useRef, useState } from 'react';
@@ -18,6 +17,7 @@ import { ThematicsList, TopicsList } from '@components/Widgets';
 import styles from '@styles/pages/Page.module.scss';
 import Spinner from '@components/Spinner/Spinner';
 import PaginationCursor from '@components/PaginationCursor/PaginationCursor';
+import { defaultLocale, loadTranslation } from '@utils/helpers/i18n';
 
 const Search: NextPageWithLayout = () => {
   const [query, setQuery] = useState('');
@@ -78,7 +78,6 @@ const Search: NextPageWithLayout = () => {
   const title = query
     ? t`Search results for: ${query}`
     : t({
-        id: 'msg.search',
         comment: 'Search page title',
         message: 'Search',
       });
@@ -143,17 +142,17 @@ const Search: NextPageWithLayout = () => {
 
 Search.getLayout = getLayout;
 
-export const getStaticProps: GetStaticProps = async (context) => {
-  const translation = await loadTranslation(
-    context.locale!,
-    process.env.NODE_ENV === 'production'
-  );
-
+export const getStaticProps: GetStaticProps = async (
+  context: GetStaticPropsContext
+) => {
   const breadcrumbTitle = t`Search`;
+  const { locale } = context;
+  const translation = await loadTranslation(locale || defaultLocale);
 
   return {
     props: {
       breadcrumbTitle,
+      locale,
       translation,
     },
   };
diff --git a/src/pages/sujet/[slug].tsx b/src/pages/sujet/[slug].tsx
index 028131b..9947758 100644
--- a/src/pages/sujet/[slug].tsx
+++ b/src/pages/sujet/[slug].tsx
@@ -3,7 +3,7 @@ import PostPreview from '@components/PostPreview/PostPreview';
 import { t } from '@lingui/macro';
 import { NextPageWithLayout } from '@ts/types/app';
 import { TopicProps, ThematicPreview } from '@ts/types/taxonomies';
-import { loadTranslation } from '@utils/helpers/i18n';
+import { defaultLocale, loadTranslation } from '@utils/helpers/i18n';
 import { GetStaticPaths, GetStaticProps, GetStaticPropsContext } from 'next';
 import { ParsedUrlQuery } from 'querystring';
 import styles from '@styles/pages/Page.module.scss';
@@ -151,10 +151,8 @@ interface PostParams extends ParsedUrlQuery {
 export const getStaticProps: GetStaticProps = async (
   context: GetStaticPropsContext
 ) => {
-  const translation = await loadTranslation(
-    context.locale!,
-    process.env.NODE_ENV === 'production'
-  );
+  const { locale } = context;
+  const translation = await loadTranslation(locale || defaultLocale);
   const { slug } = context.params as PostParams;
   const topic = await getTopicBySlug(slug);
   const breadcrumbTitle = topic.title;
@@ -162,6 +160,7 @@ export const getStaticProps: GetStaticProps = async (
   return {
     props: {
       breadcrumbTitle,
+      locale,
       topic,
       translation,
     },
diff --git a/src/pages/thematique/[slug].tsx b/src/pages/thematique/[slug].tsx
index 75f33ff..9955089 100644
--- a/src/pages/thematique/[slug].tsx
+++ b/src/pages/thematique/[slug].tsx
@@ -3,7 +3,7 @@ import PostPreview from '@components/PostPreview/PostPreview';
 import { t } from '@lingui/macro';
 import { NextPageWithLayout } from '@ts/types/app';
 import { TopicPreview, ThematicProps } from '@ts/types/taxonomies';
-import { loadTranslation } from '@utils/helpers/i18n';
+import { defaultLocale, loadTranslation } from '@utils/helpers/i18n';
 import { GetStaticPaths, GetStaticProps, GetStaticPropsContext } from 'next';
 import { ParsedUrlQuery } from 'querystring';
 import styles from '@styles/pages/Page.module.scss';
@@ -141,10 +141,8 @@ interface PostParams extends ParsedUrlQuery {
 export const getStaticProps: GetStaticProps = async (
   context: GetStaticPropsContext
 ) => {
-  const translation = await loadTranslation(
-    context.locale!,
-    process.env.NODE_ENV === 'production'
-  );
+  const { locale } = context;
+  const translation = await loadTranslation(locale || defaultLocale);
   const { slug } = context.params as PostParams;
   const thematic = await getThematicBySlug(slug);
   const breadcrumbTitle = thematic.title;
@@ -152,6 +150,7 @@ export const getStaticProps: GetStaticProps = async (
   return {
     props: {
       breadcrumbTitle,
+      locale,
       thematic,
       translation,
     },