fix: next-intl usage

src/app/[locale]/_components/layout/layout-view.tsx

@@ -41,9 +41,9 @@ export function LayoutView({ children, locale }: Props) {
                 </button>
               </DropdownMenuTrigger>
               <DropdownMenuContent align="end">
-                <DropdownMenuItem>XXX</DropdownMenuItem>
-                <DropdownMenuItem>YYY</DropdownMenuItem>
-                <DropdownMenuItem>ZZZ</DropdownMenuItem>
+                <DropdownMenuItem>foo</DropdownMenuItem>
+                <DropdownMenuItem>bar</DropdownMenuItem>
+                <DropdownMenuItem>baz</DropdownMenuItem>
               </DropdownMenuContent>
             </DropdownMenu>
           </div>

src/app/[locale]/_components/top-page.tsx

@@ -0,0 +1,13 @@
+import { useTranslations } from "next-intl";
+
+export function TopPage() {
+  const t = useTranslations("top-page");
+
+  return (
+    <main className="container">
+      <h1 className="font-bold text-5xl italic mt-32 text-center">
+        {t("tagline")}
+      </h1>
+    </main>
+  );
+}

src/app/[locale]/page.tsx

@@ -1,4 +1,5 @@
 import { initializeLocale } from "@/i18n/initialize-locale";
+import { TopPage } from "./_components/top-page";
 
 type Props = {
   params: Promise<{
@@ -10,9 +11,5 @@ export default async function Page({ params }: Props) {
   const { locale } = await params;
   initializeLocale(locale);
 
-  return (
-    <main className="container">
-      <h1 className="font-bold text-xl">Page</h1>
-    </main>
-  );
+  return <TopPage />;
 }

src/i18n/i18n.ts

@@ -2,10 +2,12 @@ import { getRequestConfig } from "next-intl/server";
 import { notFound } from "next/navigation";
 import { locales } from "./locales/list";
 
-export default getRequestConfig(async ({ locale }) => {
-  if (!locales.includes(locale as (typeof locales)[number])) notFound();
+export default getRequestConfig(async ({ requestLocale }) => {
+  const locale = (await requestLocale) as (typeof locales)[number];
+  if (!locales.includes(locale)) notFound();
 
   return {
     messages: (await import(`./locales/${locale}.json`)).default,
+    locale,
   };
 });

src/i18n/locales/en.json

@@ -10,5 +10,8 @@
     "light": "Light",
     "dark": "Dark",
     "system": "System"
+  },
+  "top-page": {
+    "tagline": "Hello world"
   }
 }

src/i18n/locales/ja.json

@@ -10,5 +10,8 @@
     "light": "ライト",
     "dark": "ダーク",
     "system": "システム"
+  },
+  "top-page": {
+    "tagline": "こんにちは、世界"
   }
 }