feat: upgrade to new i18n conventions (#337)

Author: bryanlundberg

package-lock.json

@@ -31,7 +31,7 @@
     "lightweight-charts": "^4.1.4",
     "luxon": "^3.4.4",
     "next": "^14.2.3",
-    "next-intl": "^3.14.1",
+    "next-intl": "^3.19.1",
     "papaparse": "^5.4.1",
     "postcss": "8.4.31",
     "pretty-ms": "^8.0.0",

package.json

@@ -1,4 +1,4 @@
-import { Link } from "@/navigation";
+import { Link } from "@/i18n/routing";
 
 export default function NotFound() {
   return (

src/app/[locale]/not-found.tsx

@@ -1,4 +1,4 @@
-import { defaultLocale, locales } from "@/navigation";
+import { defaultLocale, locales } from "@/i18n/locales";
 import { MetadataRoute } from "next";
 
 const pathnames = ["/", "/cubes", "/solves", "/stats"];

src/app/sitemap.ts

@@ -1,6 +1,5 @@
 import { useRef, useState } from "react";
 import Image from "next/image";
-import { Link } from "@/navigation";
 import { Categories } from "@/interfaces/Categories";
 import { cubeCollection } from "@/lib/const/cubeCollection";
 import genId from "@/lib/genId";
@@ -12,6 +11,7 @@ import { useBackgroundImageStore } from "@/store/BackgroundThemeStore";
 import { Cube } from "@/interfaces/Cube";
 import { useTranslations } from "next-intl";
 import { ChevronUpDownIcon, PlusIcon } from "@heroicons/react/24/solid";
+import { Link } from "@/i18n/routing";
 
 export default function Select() {
   const [open, setOpen] = useState<boolean>(false);

src/components/Select.tsx

@@ -2,7 +2,7 @@ import { Cube } from "@/interfaces/Cube";
 import BookmarkFav from "@/components/cubes/BookmarkFav";
 import { useTimerStore } from "@/store/timerStore";
 import { useCubesModalStore } from "@/store/CubesModalStore";
-import { useRouter } from "@/navigation";
+import { useRouter } from "@/i18n/routing";
 import { getAllCubes, saveCube } from "@/db/dbOperations";
 import { useTranslations, useLocale } from "next-intl";
 import { DateTime } from "luxon";
@@ -72,8 +72,8 @@ export default function TableRow({ cube }: { cube: Cube }) {
         </div>
         <div className="hidden text-center align-middle cursor-pointer md:table-cell">
           {DateTime.fromMillis(cube?.createdAt)
-                        .setLocale(locale)
-                        .toLocaleString()}
+            .setLocale(locale)
+            .toLocaleString()}
         </div>
         <div className="hidden text-center align-middle md:table-cell">
           {cube?.solves?.session.length > 0 ? (

src/components/cubes/TableRow.tsx

@@ -4,11 +4,11 @@ import { useSettingsModalStore } from "@/store/SettingsModalStore";
 import { useTimerStore } from "@/store/timerStore";
 import { AnimatePresence, motion } from "framer-motion";
 import Image from "next/image";
-import { useRouter } from "@/navigation";
 import { useRef, useState } from "react";
 import Loading from "../Loading";
 import { getAllCubes } from "@/db/dbOperations";
 import { useTranslations } from "next-intl";
+import { useRouter } from "@/i18n/routing";
 
 export default function ImportModal() {
   const { setImportModalOpen, importModalOpen } = useSettingsModalStore();

src/components/menu-settings/ImportModal.tsx

@@ -4,7 +4,7 @@ import { MenuSection } from "@/components/menu-settings/MenuSection";
 import { MenuOption } from "@/components/menu-settings/MenuOption";
 import { DataImportExport } from "@/components/menu-settings/DataImportExport";
 import { useTimerStore } from "@/store/timerStore";
-import { Link } from "@/navigation";
+import { Link } from "@/i18n/routing";
 import useEscape from "@/hooks/useEscape";
 import Image from "next/image";
 import { AnimatePresence, motion } from "framer-motion";

src/components/menu-settings/Menu.tsx

@@ -4,7 +4,7 @@ import { MenuSection } from "./MenuSection";
 import { useLocale, useTranslations } from "next-intl";
 import { languages } from "@/lib/const/languages";
 import { useRef } from "react";
-import { useRouter } from "@/navigation";
+import { useRouter } from "@/i18n/routing";
 import { useSettingsModalStore } from "@/store/SettingsModalStore";
 import { GlobeAltIcon } from "@heroicons/react/24/solid";
 import { Button } from "../button";

src/components/menu-settings/MenuSelectLanguage.tsx

@@ -1,5 +1,4 @@
-import { usePathname } from "@/navigation";
-import { Link } from "@/navigation";
+import { Link, usePathname } from "@/i18n/routing";
 
 interface NavItem {
   path: string;

src/components/navbar/NavItem.tsx

@@ -1,5 +1,5 @@
 import { CubeIcon, CursorArrowRaysIcon } from "@heroicons/react/24/solid";
-import { Link } from "@/navigation";
+import { Link } from "@/i18n/routing";
 
 type Icon = "no-cube-selected" | "no-solves";
 

src/components/solves/EmptySolves.tsx

@@ -3,7 +3,7 @@ import { useSettingsModalStore } from "@/store/SettingsModalStore";
 import { useTimerStore } from "@/store/timerStore";
 import { InteractiveIcon } from "./InteractiveIcon";
 import { ScrambleZone } from "./ScrambleZone";
-import { Link } from "@/navigation";
+import { Link } from "@/i18n/routing";
 import { useTranslations } from "next-intl";
 import { ArrowPathIcon, Cog6ToothIcon } from "@heroicons/react/24/solid";
 

src/components/timer/HeaderTimer.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useRouter } from "@/navigation";
+import { useRouter } from "@/i18n/routing";
 import { useEffect } from "react";
 
 // Resets all hashes on first load

src/hooks/useForceHashSettings.ts

@@ -1,7 +1,3 @@
-import { createSharedPathnamesNavigation } from "next-intl/navigation";
-
-export const defaultLocale = "en";
-export const localePrefix = "always";
 export const locales = [
   "en",
   "de",
@@ -30,6 +26,6 @@ export const locales = [
   "uk",
   "vi",
   "zh",
-] as const;
-export const { Link, redirect, usePathname, useRouter } =
-  createSharedPathnamesNavigation({ locales, localePrefix });
+];
+
+export const defaultLocale = "en";

src/navigation.ts renamed to src/i18n/locales.js

@@ -1,14 +1,14 @@
 import { notFound } from "next/navigation";
 import { getRequestConfig } from "next-intl/server";
-import { locales } from "./navigation";
+import { routing } from "./routing";
 import { merge } from "ts-deepmerge";
 
 export default getRequestConfig(async ({ locale }) => {
   // Validate that the incoming `locale` parameter is valid
-  if (!locales.includes(locale as any)) notFound();
+  if (!routing.locales.includes(locale as any)) notFound();
 
-  const userMessages = (await import(`../messages/${locale}.json`)).default;
-  const defaultMessages = (await import(`../messages/en.json`)).default;
+  const userMessages = (await import(`../../messages/${locale}.json`)).default;
+  const defaultMessages = (await import(`../../messages/en.json`)).default;
   const messages = merge(defaultMessages, userMessages);
 
   return {

src/i18n.ts renamed to src/i18n/request.ts

@@ -0,0 +1,18 @@
+import { defineRouting } from "next-intl/routing";
+import { createSharedPathnamesNavigation } from "next-intl/navigation";
+import { locales } from "./locales";
+
+export const routing = defineRouting({
+  // A list of all locales that are supported
+  locales: [...locales],
+
+  localePrefix: "always",
+
+  // Used when no locale matches
+  defaultLocale: "en",
+});
+
+// Lightweight wrappers around Next.js' navigation APIs
+// that will consider the routing configuration
+export const { Link, redirect, usePathname, useRouter } =
+  createSharedPathnamesNavigation(routing);

src/i18n/routing.js

@@ -1,4 +1,3 @@
-import { locales } from "@/navigation";
 import {
   US,
   ES,
@@ -28,6 +27,7 @@ import {
   SK,
   EE,
 } from "country-flag-icons/react/3x2";
+import { locales } from "@/i18n/locales";
 
 interface LanguageProp {
   code: (typeof locales)[number];

src/lib/const/languages.tsx

@@ -1,12 +1,7 @@
 import createMiddleware from "next-intl/middleware";
-import { locales, localePrefix } from "@/navigation";
-export default createMiddleware({
-  // A list of all locales that are supported
-  locales,
-  localePrefix,
-  localeDetection: true,
-  defaultLocale: "en",
-});
+import { routing } from "./i18n/routing";
+
+export default createMiddleware(routing);
 
 export const config = {
   matcher: [

src/middleware.ts

@@ -27,7 +27,8 @@
     "**/*.ts",
     "**/*.tsx",
     ".next/types/**/*.ts",
-    "src/components/timer/TimerWidgets.tsx"
+    "src/components/timer/TimerWidgets.tsx",
+    "src/i18n/routing.js"
   ],
   "exclude": ["node_modules"]
 }