Update next-intl (and other packages), internationalize URLs

app/[locale]/components/Footer.tsx

@@ -1,11 +1,15 @@
+"use client";
+
 import { useTranslations } from "next-intl";
-import Link from "next-intl/link";
 import { FaGithub, FaRegEnvelope } from "react-icons/fa";
 
+import { Link, usePathname } from "@/utils/navigation";
+
 import ThemeSwitcher from "./ThemeSwitcher";
 
 export default function Footer() {
   const t = useTranslations("Footer");
+  const pathname = usePathname();
 
   return (
     <footer
@@ -13,27 +17,23 @@ export default function Footer() {
       data-test="footer"
     >
       <div className="flex items-center py-2 hover:[&_a]:opacity-80">
-        <Link
+        <a
           href="https://github.com/TheRealOwenRees/echecsfrance"
           target="_blank"
           aria-label={t("githubAria")}
           className="mr-4"
         >
           <FaGithub />
-        </Link>
-        <Link
-          href="/contactez-nous"
-          aria-label={t("contactAria")}
-          className="mr-4"
-        >
+        </a>
+        <Link href="/contact-us" aria-label={t("contactAria")} className="mr-4">
           <FaRegEnvelope />
         </Link>
         <div className="mr-4 space-x-2 text-xs">
-          <Link href="/" locale="fr">
+          <Link href={pathname} locale="fr">
             FR
           </Link>
           <span>|</span>
-          <Link href="/" locale="en">
+          <Link href={pathname} locale="en">
             EN
           </Link>
         </div>

app/[locale]/components/HamburgerMenu.tsx

@@ -1,10 +1,10 @@
 import { Dispatch, RefObject, SetStateAction, useRef, useState } from "react";
 
 import { useTranslations } from "next-intl";
-import Link from "next-intl/link";
 import { twMerge } from "tailwind-merge";
 
 import useHamburgerClose from "@/hooks/useHamburgerClose";
+import { Link } from "@/utils/navigation";
 
 interface HamburgerMenuState {
   menuVisible: boolean;
@@ -64,7 +64,7 @@ const HamburgerMenu = ({
       <ul className="list-reset text-white">
         <li className="py-5 text-center text-xl">
           <Link
-            href="/tournois"
+            href="/tournaments"
             className="border-b-2 border-transparent transition-all duration-300 ease-in-out hover:border-white"
           >
             {t("tournaments")}

app/[locale]/components/Navbar.tsx

@@ -1,5 +1,6 @@
 import { useTranslations } from "next-intl";
-import Link from "next-intl/link";
+
+import { Link } from "@/utils/navigation";
 
 import Hamburger from "./Hamburger";
 
@@ -7,10 +8,10 @@ export default function Navbar() {
   const t = useTranslations("Nav");
 
   const links = [
-    { title: t("tournaments"), route: "/tournois" },
+    { title: t("tournaments"), route: "/tournaments" },
     { title: t("clubs"), route: "/clubs" },
     { title: t("elo"), route: "/elo" },
-  ];
+  ] as const;
 
   return (
     <nav