chore: update next-intl setup

apps/web/src/app/[locale]/_components/SidebarCategoryPanel.tsx

@@ -4,7 +4,7 @@ import { TabPanel } from "@headlessui/react";
 import { useTranslations } from "next-intl";
 import { useState } from "react";
 import { PiPlus, PiQuestion } from "react-icons/pi";
-import { Link } from "../../../navigation";
+import { Link } from "../../../i18n/routing";
 import { trpc } from "../_components/TrpcProvider";
 import { CategoryModal } from "./CategoryModal";
 import { CategoryTreeItem } from "./CategoryTreeItem";

apps/web/src/app/[locale]/_components/SidebarNavItem.tsx

@@ -1,6 +1,6 @@
 import type { ReactNode } from "react";
 import { tv } from "tailwind-variants";
-import { Link, usePathname } from "../../../navigation";
+import { Link, usePathname } from "../../../i18n/routing";
 
 const barStyle = tv({
   base: "my-2 mr-4 block h-6 w-1 rounded-r-sm",

apps/web/src/app/[locale]/app/(home)/_components/TimeEntryList.tsx

@@ -11,7 +11,7 @@ import { useMemo, useState } from "react";
 import { PiCalendarBlank, PiTimer } from "react-icons/pi";
 import * as R from "remeda";
 import { tv } from "tailwind-variants";
-import { useRouter } from "../../../../../navigation";
+import { useRouter } from "../../../../../i18n/routing";
 import { TimeEntryModal } from "../../../_components/TimeEntryModal";
 import { Tooltip } from "../../../_components/Tooltip";
 import { trpc } from "../../../_components/TrpcProvider";

apps/web/src/app/[locale]/app/calendar/_components/CalendarHeader.tsx

@@ -3,7 +3,7 @@
 import { addWeeks, format, isSameWeek, startOfWeek } from "date-fns";
 import { useTranslations } from "next-intl";
 import { PiCalendarBlank } from "react-icons/pi";
-import { useRouter } from "../../../../../navigation";
+import { useRouter } from "../../../../../i18n/routing";
 import { DatePicker } from "../../../_components/DatePicker";
 
 type Props = {

apps/web/src/app/[locale]/app/reports/_components/ReportHeader.tsx

@@ -16,7 +16,7 @@ import {
 } from "date-fns";
 import { useTranslations } from "next-intl";
 import { tv } from "tailwind-variants";
-import { useRouter } from "../../../../../navigation";
+import { useRouter } from "../../../../../i18n/routing";
 import { DatePicker } from "../../../_components/DatePicker";
 import { ListboxButton } from "../../../_components/ListboxButton";
 import { ListboxOption } from "../../../_components/ListboxOption";

apps/web/src/app/[locale]/layout.tsx

@@ -1,10 +1,12 @@
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import { Provider } from "jotai";
+import { notFound } from "next/navigation";
 import { NextIntlClientProvider } from "next-intl";
 import { getMessages } from "next-intl/server";
 import type { ReactNode } from "react";
 import { roboto, inter } from "../../../config/fonts";
-import { type Locale, formats } from "../../../config/locale";
+import { formats } from "../../../config/locale";
+import { routing } from "../../i18n/routing";
 import { Toast } from "./_components/Toast";
 import { TrpcProvider } from "./_components/TrpcProvider";
 
@@ -13,11 +15,19 @@ export const fetchCache = "only-no-store";
 type Props = {
   children: ReactNode;
   params: {
-    locale: Locale;
+    locale: string;
   };
 };
 
 const Layout = async ({ children, params: { locale } }: Props) => {
+  // https://next-intl-docs.vercel.app/docs/getting-started/app-router/with-i18n-routing#layout
+  if (
+    typeof locale !== "string" ||
+    !routing.locales.includes(locale as (typeof routing.locales)[number])
+  ) {
+    notFound();
+  }
+
   const messages = await getMessages();
 
   return (

apps/web/src/i18n/request.ts

@@ -0,0 +1,24 @@
+import type { AbstractIntlMessages } from "next-intl";
+import { getRequestConfig } from "next-intl/server";
+import { routing } from "./routing";
+
+// https://next-intl-docs.vercel.app/docs/getting-started/app-router/with-i18n-routing#i18n-request
+export default getRequestConfig(async ({ requestLocale }) => {
+  let locale = await requestLocale;
+
+  if (
+    typeof locale !== "string" ||
+    !routing.locales.includes(locale as (typeof routing.locales)[number])
+  ) {
+    locale = routing.defaultLocale;
+  }
+
+  return {
+    locale,
+    messages: (
+      (await import(`../../messages/${locale}.json`)) as {
+        default: AbstractIntlMessages;
+      }
+    ).default,
+  };
+});

apps/web/src/i18n/routing.ts

@@ -0,0 +1,11 @@
+import { createNavigation } from "next-intl/navigation";
+import { defineRouting } from "next-intl/routing";
+
+// https://next-intl-docs.vercel.app/docs/getting-started/app-router/with-i18n-routing#i18nts
+export const routing = defineRouting({
+  locales: ["en", "ja"],
+  defaultLocale: "en",
+});
+
+export const { Link, redirect, usePathname, useRouter, getPathname } =
+  createNavigation(routing);

apps/web/src/middleware.ts

@@ -5,9 +5,10 @@ import type { NextRequestWithAuth } from "next-auth/middleware";
 import withAuth from "next-auth/middleware";
 import createIntlMiddleware from "next-intl/middleware";
 import * as R from "remeda";
-import { defaultLocale, locales } from "../config/locale";
+import { locales } from "../config/locale";
 import { pageOptions } from "../config/next-auth";
 import { serverEnv } from "../env/server.mjs";
+import { routing } from "./i18n/routing";
 
 const PUBLIC_PAGES = ["/auth/sign-in"];
 const PUBLIC_FILES = ["/favicon.ico", "/robots.txt"];
@@ -66,10 +67,7 @@ const isAllowedIp = (ip: string | undefined) => {
   return serverEnv.ALLOWED_IPS.split(",").includes(ip);
 };
 
-const intlMiddleware = createIntlMiddleware({
-  locales: [...locales],
-  defaultLocale,
-});
+const intlMiddleware = createIntlMiddleware(routing);
 
 const authMiddleware = withAuth(
   function onSuccess(req) {