chore(i18n): replace i18n provider and helpers

15 files changed, 131 insertions, 192 deletions

diff --git a/src/config/website.ts b/src/config/website.ts
index 1b0e2d3..a359d9a 100644
--- a/src/config/website.ts
+++ b/src/config/website.ts
@@ -10,6 +10,7 @@ export const config = {
   locales: {
     defaultLocale: 'fr',
     defaultCountry: 'FR',
+    supported: ['en', 'fr'],
   },
   postsPerPage: 10,
   twitterId: '@ArmandPhilippot',
diff --git a/src/pages/404.tsx b/src/pages/404.tsx
index 5ba7b95..64c74ba 100644
--- a/src/pages/404.tsx
+++ b/src/pages/404.tsx
@@ -2,12 +2,12 @@ import { getLayout } from '@components/Layouts/Layout';
 import PostHeader from '@components/PostHeader/PostHeader';
 import { seo } from '@config/seo';
 import { t, Trans } from '@lingui/macro';
+import styles from '@styles/pages/Page.module.scss';
 import { NextPageWithLayout } from '@ts/types/app';
-import { defaultLocale, loadTranslation } from '@utils/helpers/i18n';
+import { loadTranslation } from '@utils/helpers/i18n';
 import { GetStaticProps, GetStaticPropsContext } from 'next';
 import Head from 'next/head';
 import Link from 'next/link';
-import styles from '@styles/pages/Page.module.scss';
 
 const error404: NextPageWithLayout = () => {
   return (
@@ -40,7 +40,7 @@ export const getStaticProps: GetStaticProps = async (
 ) => {
   const breadcrumbTitle = t`Error`;
   const { locale } = context;
-  const translation = await loadTranslation(locale || defaultLocale);
+  const translation = await loadTranslation(locale);
 
   return {
     props: {
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index db021f9..ec97ff7 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -1,23 +1,21 @@
-import { useEffect } from 'react';
-import { i18n } from '@lingui/core';
-import { I18nProvider } from '@lingui/react';
+import { config } from '@config/website';
 import { AppPropsWithLayout } from '@ts/types/app';
-import { activateLocale, defaultLocale, initLingui } from '@utils/helpers/i18n';
-import '../styles/globals.scss';
 import { ThemeProvider } from 'next-themes';
-
-initLingui(defaultLocale);
+import { useRouter } from 'next/router';
+import { IntlProvider } from 'react-intl';
+import '../styles/globals.scss';
 
 const MyApp = ({ Component, pageProps }: AppPropsWithLayout) => {
-  const locale: string = pageProps.locale || defaultLocale;
-
-  useEffect(() => {
-    activateLocale(locale, pageProps.translation);
-  });
+  const { locale, defaultLocale } = useRouter();
+  const appLocale: string = locale || config.locales.defaultLocale;
 
   const getLayout = Component.getLayout ?? ((page) => page);
   return (
-    <I18nProvider i18n={i18n}>
+    <IntlProvider
+      locale={appLocale}
+      defaultLocale={defaultLocale}
+      messages={pageProps.translation}
+    >
       <ThemeProvider
         defaultTheme="system"
         enableColorScheme={true}
@@ -25,7 +23,7 @@ const MyApp = ({ Component, pageProps }: AppPropsWithLayout) => {
       >
         {getLayout(<Component {...pageProps} />)}
       </ThemeProvider>
-    </I18nProvider>
+    </IntlProvider>
   );
 };
 
diff --git a/src/pages/article/[slug].tsx b/src/pages/article/[slug].tsx
index d38ff63..ce9c22b 100644
--- a/src/pages/article/[slug].tsx
+++ b/src/pages/article/[slug].tsx
@@ -3,11 +3,14 @@ import CommentsList from '@components/CommentsList/CommentsList';
 import { getLayout } from '@components/Layouts/Layout';
 import PostFooter from '@components/PostFooter/PostFooter';
 import PostHeader from '@components/PostHeader/PostHeader';
+import Sidebar from '@components/Sidebar/Sidebar';
+import { Sharing, ToC } from '@components/Widgets';
 import { config } from '@config/website';
 import { getAllPostsSlug, getPostBySlug } from '@services/graphql/queries';
+import styles from '@styles/pages/Page.module.scss';
 import { NextPageWithLayout } from '@ts/types/app';
 import { ArticleMeta, ArticleProps } from '@ts/types/articles';
-import { defaultLocale, loadTranslation } from '@utils/helpers/i18n';
+import { loadTranslation } from '@utils/helpers/i18n';
 import { addPrismClasses, translateCopyButton } from '@utils/helpers/prism';
 import { GetStaticPaths, GetStaticProps, GetStaticPropsContext } from 'next';
 import Head from 'next/head';
@@ -15,9 +18,6 @@ import { useRouter } from 'next/router';
 import Prism from 'prismjs';
 import { ParsedUrlQuery } from 'querystring';
 import { useEffect } from 'react';
-import styles from '@styles/pages/Page.module.scss';
-import { Sharing, ToC } from '@components/Widgets';
-import Sidebar from '@components/Sidebar/Sidebar';
 import { Blog, BlogPosting, Graph, WebPage } from 'schema-dts';
 
 const SingleArticle: NextPageWithLayout<ArticleProps> = ({ post }) => {
@@ -163,7 +163,7 @@ export const getStaticProps: GetStaticProps = async (
   context: GetStaticPropsContext
 ) => {
   const { locale } = context;
-  const translation = await loadTranslation(locale || defaultLocale);
+  const translation = await loadTranslation(locale);
   const { slug } = context.params as PostParams;
   const post = await getPostBySlug(slug);
   const breadcrumbTitle = post.title;
@@ -171,7 +171,6 @@ 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 0650cfb..8e42e02 100644
--- a/src/pages/blog/index.tsx
+++ b/src/pages/blog/index.tsx
@@ -1,25 +1,25 @@
-import { GetStaticProps, GetStaticPropsContext } from 'next';
-import Head from 'next/head';
-import { t } from '@lingui/macro';
+import { Button } from '@components/Buttons';
 import { getLayout } from '@components/Layouts/Layout';
+import PaginationCursor from '@components/PaginationCursor/PaginationCursor';
+import PostHeader from '@components/PostHeader/PostHeader';
+import PostsList from '@components/PostsList/PostsList';
+import Sidebar from '@components/Sidebar/Sidebar';
+import Spinner from '@components/Spinner/Spinner';
+import { ThematicsList, TopicsList } from '@components/Widgets';
 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 { defaultLocale, loadTranslation } from '@utils/helpers/i18n';
-import PostsList from '@components/PostsList/PostsList';
-import useSWRInfinite from 'swr/infinite';
-import { Button } from '@components/Buttons';
+import { t } from '@lingui/macro';
 import { getPublishedPosts } from '@services/graphql/queries';
-import PostHeader from '@components/PostHeader/PostHeader';
-import { ThematicsList, TopicsList } from '@components/Widgets';
-import Sidebar from '@components/Sidebar/Sidebar';
 import styles from '@styles/pages/Page.module.scss';
+import { NextPageWithLayout } from '@ts/types/app';
+import { BlogPageProps, PostsList as PostsListData } from '@ts/types/blog';
+import { loadTranslation } from '@utils/helpers/i18n';
+import { GetStaticProps, GetStaticPropsContext } from 'next';
+import Head from 'next/head';
+import { useRouter } from 'next/router';
 import { useEffect, useRef, useState } from 'react';
-import Spinner from '@components/Spinner/Spinner';
 import { Blog as BlogSchema, Graph, WebPage } from 'schema-dts';
-import { useRouter } from 'next/router';
-import PaginationCursor from '@components/PaginationCursor/PaginationCursor';
+import useSWRInfinite from 'swr/infinite';
 
 const Blog: NextPageWithLayout<BlogPageProps> = ({ fallback }) => {
   const lastPostRef = useRef<HTMLSpanElement>(null);
@@ -167,7 +167,7 @@ export const getStaticProps: GetStaticProps = async (
   const breadcrumbTitle = t`Blog`;
   const data = await getPublishedPosts({ first: config.postsPerPage });
   const { locale } = context;
-  const translation = await loadTranslation(locale || defaultLocale);
+  const translation = await loadTranslation(locale);
 
   return {
     props: {
diff --git a/src/pages/contact.tsx b/src/pages/contact.tsx
index cb88b7d..464854d 100644
--- a/src/pages/contact.tsx
+++ b/src/pages/contact.tsx
@@ -1,21 +1,21 @@
 import { ButtonSubmit } from '@components/Buttons';
 import { Form, FormItem, Input, TextArea } from '@components/Form';
 import { getLayout } from '@components/Layouts/Layout';
+import PostHeader from '@components/PostHeader/PostHeader';
+import Sidebar from '@components/Sidebar/Sidebar';
+import { SocialMedia } from '@components/Widgets';
 import { seo } from '@config/seo';
+import { config } from '@config/website';
 import { t } from '@lingui/macro';
 import { sendMail } from '@services/graphql/mutations';
+import styles from '@styles/pages/Page.module.scss';
 import { NextPageWithLayout } from '@ts/types/app';
-import { defaultLocale, loadTranslation } from '@utils/helpers/i18n';
+import { loadTranslation } from '@utils/helpers/i18n';
 import { GetStaticProps, GetStaticPropsContext } from 'next';
 import Head from 'next/head';
+import { useRouter } from 'next/router';
 import { FormEvent, useState } from 'react';
-import PostHeader from '@components/PostHeader/PostHeader';
-import styles from '@styles/pages/Page.module.scss';
-import { SocialMedia } from '@components/Widgets';
-import Sidebar from '@components/Sidebar/Sidebar';
 import { ContactPage as ContactPageSchema, Graph, WebPage } from 'schema-dts';
-import { config } from '@config/website';
-import { useRouter } from 'next/router';
 
 const ContactPage: NextPageWithLayout = () => {
   const [name, setName] = useState('');
@@ -178,7 +178,7 @@ export const getStaticProps: GetStaticProps = async (
 ) => {
   const breadcrumbTitle = t`Contact`;
   const { locale } = context;
-  const translation = await loadTranslation(locale || defaultLocale);
+  const translation = await loadTranslation(locale);
 
   return {
     props: {
diff --git a/src/pages/cv.tsx b/src/pages/cv.tsx
index 85bddd6..a851c38 100644
--- a/src/pages/cv.tsx
+++ b/src/pages/cv.tsx
@@ -1,19 +1,19 @@
 import { getLayout } from '@components/Layouts/Layout';
+import PostHeader from '@components/PostHeader/PostHeader';
+import Sidebar from '@components/Sidebar/Sidebar';
+import { CVPreview, SocialMedia, ToC } from '@components/Widgets';
 import { seo } from '@config/seo';
+import { config } from '@config/website';
+import CVContent, { intro, meta, pdf, image } from '@content/pages/cv.mdx';
+import { t } from '@lingui/macro';
+import styles from '@styles/pages/Page.module.scss';
 import { NextPageWithLayout } from '@ts/types/app';
+import { ArticleMeta } from '@ts/types/articles';
+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';
-import PostHeader from '@components/PostHeader/PostHeader';
-import { ArticleMeta } from '@ts/types/articles';
-import styles from '@styles/pages/Page.module.scss';
-import { CVPreview, SocialMedia, ToC } from '@components/Widgets';
-import { t } from '@lingui/macro';
-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';
+import { AboutPage, Graph, WebPage } from 'schema-dts';
 
 const CV: NextPageWithLayout = () => {
   const router = useRouter();
@@ -113,7 +113,7 @@ export const getStaticProps: GetStaticProps = async (
 ) => {
   const breadcrumbTitle = meta.title;
   const { locale } = context;
-  const translation = await loadTranslation(locale || defaultLocale);
+  const translation = await loadTranslation(locale);
 
   return {
     props: {
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index ae5fe4b..264c45a 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,18 +1,18 @@
-import type { ReactElement } from 'react';
-import { GetStaticProps, GetStaticPropsContext } from 'next';
-import Head from 'next/head';
+import FeedIcon from '@assets/images/icon-feed.svg';
+import { ButtonLink } from '@components/Buttons';
+import { ContactIcon } from '@components/Icons';
 import Layout from '@components/Layouts/Layout';
 import { seo } from '@config/seo';
-import { NextPageWithLayout } from '@ts/types/app';
-import { defaultLocale, loadTranslation } from '@utils/helpers/i18n';
+import { config } from '@config/website';
 import HomePageContent from '@content/pages/homepage.mdx';
-import { ButtonLink } from '@components/Buttons';
-import styles from '@styles/pages/Home.module.scss';
 import { t } from '@lingui/macro';
-import FeedIcon from '@assets/images/icon-feed.svg';
-import { ContactIcon } from '@components/Icons';
+import styles from '@styles/pages/Home.module.scss';
+import { NextPageWithLayout } from '@ts/types/app';
+import { loadTranslation } from '@utils/helpers/i18n';
+import { GetStaticProps, GetStaticPropsContext } from 'next';
+import Head from 'next/head';
+import type { ReactElement } from 'react';
 import { Graph, WebPage } from 'schema-dts';
-import { config } from '@config/website';
 
 const Home: NextPageWithLayout = () => {
   const CodingLinks = () => {
@@ -141,11 +141,10 @@ export const getStaticProps: GetStaticProps = async (
   context: GetStaticPropsContext
 ) => {
   const { locale } = context;
-  const translation = await loadTranslation(locale || defaultLocale);
+  const translation = await loadTranslation(locale);
 
   return {
     props: {
-      locale,
       translation,
     },
   };
diff --git a/src/pages/mentions-legales.tsx b/src/pages/mentions-legales.tsx
index c9d2ccd..e13a7e2 100644
--- a/src/pages/mentions-legales.tsx
+++ b/src/pages/mentions-legales.tsx
@@ -1,22 +1,22 @@
 import { getLayout } from '@components/Layouts/Layout';
+import PostHeader from '@components/PostHeader/PostHeader';
+import Sidebar from '@components/Sidebar/Sidebar';
+import { ToC } from '@components/Widgets';
 import { seo } from '@config/seo';
-import { NextPageWithLayout } from '@ts/types/app';
-import { defaultLocale, loadTranslation } from '@utils/helpers/i18n';
-import { GetStaticProps, GetStaticPropsContext } from 'next';
-import Head from 'next/head';
+import { config } from '@config/website';
 import LegalNoticeContent, {
   intro,
   meta,
 } from '@content/pages/legal-notice.mdx';
-import PostHeader from '@components/PostHeader/PostHeader';
-import { ArticleMeta } from '@ts/types/articles';
+import { t } from '@lingui/macro';
 import styles from '@styles/pages/Page.module.scss';
-import { ToC } from '@components/Widgets';
-import Sidebar from '@components/Sidebar/Sidebar';
-import { Article, Graph, WebPage } from 'schema-dts';
-import { config } from '@config/website';
+import { NextPageWithLayout } from '@ts/types/app';
+import { ArticleMeta } from '@ts/types/articles';
+import { loadTranslation } from '@utils/helpers/i18n';
+import { GetStaticProps, GetStaticPropsContext } from 'next';
+import Head from 'next/head';
 import { useRouter } from 'next/router';
-import { t } from '@lingui/macro';
+import { Article, Graph, WebPage } from 'schema-dts';
 
 const LegalNotice: NextPageWithLayout = () => {
   const router = useRouter();
@@ -107,7 +107,7 @@ export const getStaticProps: GetStaticProps = async (
 ) => {
   const breadcrumbTitle = meta.title;
   const { locale } = context;
-  const translation = await loadTranslation(locale || defaultLocale);
+  const translation = await loadTranslation(locale);
 
   return {
     props: {
diff --git a/src/pages/projet/[slug].tsx b/src/pages/projet/[slug].tsx
index 847f84c..14ddf9c 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 { defaultLocale, loadTranslation } from '@utils/helpers/i18n';
+import { loadTranslation } from '@utils/helpers/i18n';
 import {
   getAllProjectsFilename,
   getProjectData,
@@ -133,7 +133,7 @@ export const getStaticProps: GetStaticProps = async (
 ) => {
   const breadcrumbTitle = '';
   const { locale } = context;
-  const translation = await loadTranslation(locale || defaultLocale);
+  const translation = await loadTranslation(locale);
   const { slug } = context.params as ProjectParams;
   const project = await getProjectData(slug);
 
diff --git a/src/pages/projets.tsx b/src/pages/projets.tsx
index 4359721..263973d 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 { defaultLocale, loadTranslation } from '@utils/helpers/i18n';
+import { loadTranslation } from '@utils/helpers/i18n';
 import { getSortedProjects } from '@utils/helpers/projects';
 import { GetStaticProps, GetStaticPropsContext } from 'next';
 import Head from 'next/head';
@@ -92,7 +92,7 @@ export const getStaticProps: GetStaticProps = async (
   const breadcrumbTitle = meta.title;
   const { locale } = context;
   const projects: Project[] = await getSortedProjects();
-  const translation = await loadTranslation(locale || defaultLocale);
+  const translation = await loadTranslation(locale);
 
   return {
     props: {
diff --git a/src/pages/recherche/index.tsx b/src/pages/recherche/index.tsx
index 7f410e8..c3c71f3 100644
--- a/src/pages/recherche/index.tsx
+++ b/src/pages/recherche/index.tsx
@@ -1,23 +1,23 @@
 import { Button } from '@components/Buttons';
 import { getLayout } from '@components/Layouts/Layout';
+import PaginationCursor from '@components/PaginationCursor/PaginationCursor';
 import PostHeader from '@components/PostHeader/PostHeader';
 import PostsList from '@components/PostsList/PostsList';
+import Sidebar from '@components/Sidebar/Sidebar';
+import Spinner from '@components/Spinner/Spinner';
+import { ThematicsList, TopicsList } from '@components/Widgets';
 import { config } from '@config/website';
 import { t } from '@lingui/macro';
 import { getPublishedPosts } from '@services/graphql/queries';
+import styles from '@styles/pages/Page.module.scss';
 import { NextPageWithLayout } from '@ts/types/app';
 import { PostsList as PostsListData } from '@ts/types/blog';
+import { loadTranslation } from '@utils/helpers/i18n';
 import { GetStaticProps, GetStaticPropsContext } from 'next';
 import Head from 'next/head';
 import { useRouter } from 'next/router';
 import { useEffect, useRef, useState } from 'react';
 import useSWRInfinite from 'swr/infinite';
-import Sidebar from '@components/Sidebar/Sidebar';
-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('');
@@ -147,7 +147,7 @@ export const getStaticProps: GetStaticProps = async (
 ) => {
   const breadcrumbTitle = t`Search`;
   const { locale } = context;
-  const translation = await loadTranslation(locale || defaultLocale);
+  const translation = await loadTranslation(locale);
 
   return {
     props: {
diff --git a/src/pages/sujet/[slug].tsx b/src/pages/sujet/[slug].tsx
index 9947758..65ea2fd 100644
--- a/src/pages/sujet/[slug].tsx
+++ b/src/pages/sujet/[slug].tsx
@@ -1,22 +1,22 @@
 import { getLayout } from '@components/Layouts/Layout';
+import PostHeader from '@components/PostHeader/PostHeader';
 import PostPreview from '@components/PostPreview/PostPreview';
+import Sidebar from '@components/Sidebar/Sidebar';
+import { RelatedThematics, ToC, TopicsList } from '@components/Widgets';
+import { config } from '@config/website';
 import { t } from '@lingui/macro';
+import { getAllTopicsSlug, getTopicBySlug } from '@services/graphql/queries';
+import styles from '@styles/pages/Page.module.scss';
 import { NextPageWithLayout } from '@ts/types/app';
+import { ArticleMeta } from '@ts/types/articles';
 import { TopicProps, ThematicPreview } from '@ts/types/taxonomies';
-import { defaultLocale, loadTranslation } from '@utils/helpers/i18n';
+import { loadTranslation } from '@utils/helpers/i18n';
 import { GetStaticPaths, GetStaticProps, GetStaticPropsContext } from 'next';
+import Head from 'next/head';
+import { useRouter } from 'next/router';
 import { ParsedUrlQuery } from 'querystring';
-import styles from '@styles/pages/Page.module.scss';
-import { getAllTopicsSlug, getTopicBySlug } from '@services/graphql/queries';
-import PostHeader from '@components/PostHeader/PostHeader';
-import { ArticleMeta } from '@ts/types/articles';
-import { RelatedThematics, ToC, TopicsList } from '@components/Widgets';
 import { useRef } from 'react';
-import Head from 'next/head';
-import Sidebar from '@components/Sidebar/Sidebar';
 import { Article as Article, Graph, WebPage } from 'schema-dts';
-import { config } from '@config/website';
-import { useRouter } from 'next/router';
 
 const Topic: NextPageWithLayout<TopicProps> = ({ topic }) => {
   const relatedThematics = useRef<ThematicPreview[]>([]);
@@ -152,7 +152,7 @@ export const getStaticProps: GetStaticProps = async (
   context: GetStaticPropsContext
 ) => {
   const { locale } = context;
-  const translation = await loadTranslation(locale || defaultLocale);
+  const translation = await loadTranslation(locale);
   const { slug } = context.params as PostParams;
   const topic = await getTopicBySlug(slug);
   const breadcrumbTitle = topic.title;
diff --git a/src/pages/thematique/[slug].tsx b/src/pages/thematique/[slug].tsx
index 9955089..d263ee9 100644
--- a/src/pages/thematique/[slug].tsx
+++ b/src/pages/thematique/[slug].tsx
@@ -1,25 +1,25 @@
 import { getLayout } from '@components/Layouts/Layout';
+import PostHeader from '@components/PostHeader/PostHeader';
 import PostPreview from '@components/PostPreview/PostPreview';
+import Sidebar from '@components/Sidebar/Sidebar';
+import { RelatedTopics, ThematicsList, ToC } from '@components/Widgets';
+import { config } from '@config/website';
 import { t } from '@lingui/macro';
-import { NextPageWithLayout } from '@ts/types/app';
-import { TopicPreview, ThematicProps } from '@ts/types/taxonomies';
-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';
 import {
   getAllThematicsSlug,
   getThematicBySlug,
 } from '@services/graphql/queries';
-import PostHeader from '@components/PostHeader/PostHeader';
-import { RelatedTopics, ThematicsList, ToC } from '@components/Widgets';
-import { useRef } from 'react';
+import styles from '@styles/pages/Page.module.scss';
+import { NextPageWithLayout } from '@ts/types/app';
 import { ArticleMeta } from '@ts/types/articles';
+import { TopicPreview, ThematicProps } from '@ts/types/taxonomies';
+import { loadTranslation } from '@utils/helpers/i18n';
+import { GetStaticPaths, GetStaticProps, GetStaticPropsContext } from 'next';
 import Head from 'next/head';
-import Sidebar from '@components/Sidebar/Sidebar';
-import { Article, Graph, WebPage } from 'schema-dts';
-import { config } from '@config/website';
 import { useRouter } from 'next/router';
+import { ParsedUrlQuery } from 'querystring';
+import { useRef } from 'react';
+import { Article, Graph, WebPage } from 'schema-dts';
 
 const Thematic: NextPageWithLayout<ThematicProps> = ({ thematic }) => {
   const relatedTopics = useRef<TopicPreview[]>([]);
@@ -142,7 +142,7 @@ export const getStaticProps: GetStaticProps = async (
   context: GetStaticPropsContext
 ) => {
   const { locale } = context;
-  const translation = await loadTranslation(locale || defaultLocale);
+  const translation = await loadTranslation(locale);
   const { slug } = context.params as PostParams;
   const thematic = await getThematicBySlug(slug);
   const breadcrumbTitle = thematic.title;
diff --git a/src/utils/helpers/i18n.ts b/src/utils/helpers/i18n.ts
index 4439906..dd010c4 100644
--- a/src/utils/helpers/i18n.ts
+++ b/src/utils/helpers/i18n.ts
@@ -1,86 +1,28 @@
-import { messages as messagesEn } from '@i18n/en/messages.js';
-import { messages as messagesFr } from '@i18n/fr/messages.js';
-import { i18n, Messages } from '@lingui/core';
-import { en, fr } from 'make-plural/plurals';
+import { config } from '@config/website';
+import { readFile } from 'fs/promises';
+import path from 'path';
 
-type Catalog = {
-  messages: Messages;
-};
-
-export const locales = {
-  en: 'English',
-  fr: 'Français',
-};
-
-export const defaultLocale = 'fr';
+type Messages = { [key: string]: string };
 
 /**
- * Load the translation with the correct method depending on environment.
- *
- * @param {string} locale - The current locale.
- * @returns {Promise<Messages>} The translated messages.
+ * Load the translation for the provided locale.
+ * @param currentLocale - The current locale.
+ * @returns {Promise<Messages>} The translated strings.
  */
-export async function loadTranslation(locale: string): Promise<Messages> {
-  let catalog: Catalog;
-
-  try {
-    if (process.env.NODE_ENV === 'production') {
-      catalog = await import(`src/i18n/${locale}/messages`);
-    } else {
-      catalog = await import(`@lingui/loader!src/i18n/${locale}/messages.po`);
-    }
+export async function loadTranslation(
+  currentLocale: string | undefined
+): Promise<Messages> {
+  const locale: string = currentLocale || config.locales.defaultLocale;
 
-    return catalog.messages;
-  } catch (error) {
-    console.error('Error while loading translation.');
-    throw error;
-  }
-}
-
-/**
- * Init lingui.
- *
- * @param {string} locale - The locale to activate.
- * @param {Messages} [messages] - The compiled translation.
- */
-export function initLingui(locale: string, messages?: Messages) {
-  try {
-    i18n.loadLocaleData({
-      en: { plurals: en },
-      fr: { plurals: fr },
-    });
-
-    if (messages) {
-      i18n.load(locale, messages);
-    } else {
-      i18n.load({
-        en: messagesEn,
-        fr: messagesFr,
-      });
-    }
-
-    i18n.activate(locale, Object.keys(locales));
-  } catch (error) {
-    console.error('Error while Lingui init.');
-    throw error;
-  }
-}
-
-/**
- * Activate the given locale.
- *
- * @param {string} locale - The locale to activate.
- * @param {Messages} messages - The compiled translation.
- */
-export function activateLocale(currentLocale: string, messages: Messages) {
-  const locale: string = Object.keys(locales).includes(currentLocale)
-    ? currentLocale
-    : defaultLocale;
+  const languagePath = path.join(process.cwd(), `lang/${locale}.json`);
 
   try {
-    initLingui(locale, messages);
+    const contents = await readFile(languagePath, 'utf8');
+    return JSON.parse(contents);
   } catch (error) {
-    console.error(`Error while activating ${currentLocale}`);
+    console.error(
+      'Error: Could not load compiled language files. Please run `yarn run i18n:compile` first."'
+    );
     throw error;
   }
 }