Add and use I18n Link component

src/modules/I18n/components/LanguageSwitcher.tsx

@@ -1,5 +1,5 @@
 import useTranslation from 'next-translate/useTranslation';
-import Link from 'next/link';
+import { Link } from 'modules/I18n';
 import { useRouter } from 'next/router';
 
 const ChangeLanguage = () => {

src/modules/I18n/components/Link.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import Link from 'next/link';
+import { useRouter } from 'next/router';
+
+import getConfig from 'next/config';
+
+const { publicRuntimeConfig } = getConfig();
+const permalinks: { [key: string]: { [key: string]: string } } =
+  publicRuntimeConfig.permalinks || {};
+
+/**
+ * Formats permalinks
+{
+  "/": {
+    "fr": "/accueil"
+  }
+}
+ * into
+{
+  "/fr/": "/fr/accueil",
+  "/en/accueil": "/"
+} 
+ */
+export const i18nFallbackUrls: { [key: string]: string } = Object.entries(
+  permalinks
+).reduce(
+  (acc, [originalSlug, permalinks]) => ({
+    ...acc,
+    ...Object.entries(permalinks || {}).reduce(
+      (acc2, [locale, permalink]) => ({
+        ...acc2,
+        [`/${locale}${originalSlug}`]: `/${locale}${permalink}`,
+        [`/en${permalink}`]: originalSlug,
+      }),
+      {}
+    ),
+  }),
+  {}
+);
+
+const I18nLink = ({ href, locale, ...props }: any) => {
+  const router = useRouter();
+  const wantedLocale = locale || router.locale;
+  let i18nProps: any = {
+    href,
+    locale,
+  };
+
+  if (i18nFallbackUrls[`/${wantedLocale}${href}`]) {
+    i18nProps = {
+      href: i18nFallbackUrls[`/${wantedLocale}${href}`],
+      locale: false,
+    };
+  }
+
+  return <Link {...i18nProps} {...props} />;
+};
+
+export default I18nLink;

src/modules/I18n/index.tsx

@@ -1,3 +1,4 @@
 export { default as useTranslation } from 'next-translate/useTranslation';
 
 export { default as LanguageSwitcher } from './components/LanguageSwitcher';
+export { default as Link } from './components/Link';

src/modules/I18n/next.config.js

@@ -43,6 +43,10 @@ module.exports = (nextConfig) => {
 
   return {
     ...nextTranslateConfig,
+    publicRuntimeConfig: {
+      ...nextTranslateConfig.publicRuntimeConfig,
+      permalinks, // add it to publicRuntimeConfig so it can be used by the Link component
+    },
     async rewrites() {
       const existingRewrites = nextTranslateConfig.rewrites
         ? await nextTranslateConfig.rewrites()