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

app/[locale]/elo/page.tsx

@@ -1,11 +1,10 @@
 "use client";
 
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useMemo } from "react";
 
 import { zodResolver } from "@hookform/resolvers/zod";
 import { isEmpty, sortBy } from "lodash";
 import { useTranslations } from "next-intl";
-import Link from "next/link";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import { FormProvider, useForm } from "react-hook-form";
 import { z } from "zod";
@@ -14,6 +13,7 @@ import { Spinner } from "@/components/Spinner";
 import { SelectField } from "@/components/form/SelectField";
 import { TextField } from "@/components/form/TextField";
 import { fetchTournamentResultsSchema } from "@/schemas";
+import { Link } from "@/utils/navigation";
 import { trpc } from "@/utils/trpc";
 
 import { KFactor } from "./KFactor";
@@ -36,7 +36,10 @@ export default function Elo() {
   const router = useRouter();
   const pathname = usePathname();
   const searchParams = useSearchParams();
-  const current = new URLSearchParams(Array.from(searchParams.entries()));
+  const current = useMemo(
+    () => new URLSearchParams(Array.from(searchParams.entries())),
+    [searchParams],
+  );
 
   const url = searchParams.get("url") ?? "";
   const kFactorParam = searchParams.get("k");
@@ -132,7 +135,7 @@ export default function Elo() {
       }
     });
     return () => subscription.unsubscribe();
-  }, [form.watch, kFactor, player]);
+  }, [current, form, form.watch, kFactor, pathname, player, router]);
 
   useEffect(() => {
     // When the URL changes, we update the form values
@@ -147,7 +150,7 @@ export default function Elo() {
     if (kFactor !== form.getValues("kFactor")) {
       form.setValue("kFactor", form.getValues("kFactor"));
     }
-  }, [searchParams, form]);
+  }, [searchParams, form, url, player, kFactor]);
 
   if (error) {
     console.error(error);
@@ -210,7 +213,7 @@ export default function Elo() {
                   ? t(error.message as TranslationKey)
                   : t.rich("unknownError", {
                       contact: (chunks) => (
-                        <Link className="underline" href="/contactez-nous">
+                        <Link className="underline" href="/contact-us">
                           {chunks}
                         </Link>
                       ),

app/[locale]/layout.tsx

@@ -8,9 +8,10 @@ import Script from "next/script";
 
 import "@/css/globals.css";
 
+import Providers from "../providers";
+
 import Footer from "./components/Footer";
 import Navbar from "./components/Navbar";
-import Providers from "./providers";
 
 const inter = Inter({ subsets: ["latin"], variable: "--font-inter" });
 const title = Julius_Sans_One({

app/[locale]/page.tsx

@@ -1,8 +1,8 @@
 import { useTranslations } from "next-intl";
 import Image from "next/image";
-import Link from "next/link";
 
 import bgImage from "@/public/images/map-bg.jpg";
+import { Link } from "@/utils/navigation";
 
 export default function Home() {
   const t = useTranslations("Home");
@@ -25,14 +25,14 @@ export default function Home() {
         <h3 className="mb-5 p-5 text-xl">
           {t.rich("how", {
             link: (chunks) => (
-              <Link href="http://www.echecs.asso.fr/" target="_blank">
+              <a href="http://www.echecs.asso.fr/" target="_blank">
                 <abbr title="Fédération Française des Échecs">{chunks}</abbr>
-              </Link>
+              </a>
             ),
           })}
         </h3>
         <Link
-          href="/tournois"
+          href="/tournaments"
           className="mb-2 rounded-lg bg-primary px-5 py-2.5 text-center text-sm font-medium text-white hover:bg-primary-700 hover:bg-gradient-to-br focus:outline-none focus:ring-4 focus:ring-primary-300 dark:focus:ring-primary-800"
         >
           {t("mapLink")}

app/sitemap.ts

@@ -1,27 +1,28 @@
 import { MetadataRoute } from "next";
 
+import { locales, pathnames } from "@/utils/navigation";
+
 export default function sitemap(): MetadataRoute.Sitemap {
-  return ["fr", "en"].flatMap((locale) => {
-    const prefix = `https://echecsfrance.com/${
-      locale === "fr" ? "" : `${locale}/`
+  return locales.flatMap((locale) => {
+    const prefix = `https://echecsfrance.com${
+      locale === "fr" ? "" : `/${locale}`
     }`;
-    return [
-      {
-        url: prefix,
+
+    const paths = Object.keys(pathnames) as Array<keyof typeof pathnames>;
+
+    return paths.map((pathname) => {
+      const route = pathnames[pathname];
+      if (typeof route === "string") {
+        return {
+          url: `${prefix}${route}`,
+          lastModified: new Date(),
+        };
+      }
+
+      return {
+        url: `${prefix}${route[locale]}`,
         lastModified: new Date(),
-      },
-      {
-        url: `${prefix}tournois`,
-        lastModified: new Date(),
-      },
-      {
-        url: `${prefix}qui-sommes-nous`,
-        lastModified: new Date(),
-      },
-      {
-        url: `${prefix}contactez-nous`,
-        lastModified: new Date(),
-      },
-    ];
+      };
+    });
   });
 }