多言語化対応の準備 (#1271)

.storybook/preview.tsx

@@ -1,5 +1,5 @@
 import { action } from "@storybook/addon-actions";
-import "../app/globals.css";
+import "../styles/globals.css";
 import { ToastContext } from "../components/Toaster";
 
 import { Preview } from "@storybook/react";

app/(v2)/AppSideNavMenu.tsx → app/[locale]/(application)/AppSideNavMenu.tsx

@@ -3,13 +3,13 @@
 import clsx from "clsx";
 import Link from "next/link";
 
-import LinkRegisterSemitag from "~/app/(v2)/editor/semitags/Link";
-import TagRegisterPageLink from "~/app/(v2)/editor/tags/Link";
-import { AllVideosPageLink } from "~/app/(v2)/mads/Link";
-import AllBilibiliRequestLink from "~/app/(v2)/requests/bilibili/Link";
-import AllNicovideoRequestsPageLink from "~/app/(v2)/requests/nicovideo/Link";
-import AllSoundcloudRequestLink from "~/app/(v2)/requests/soundcloud/Link";
-import AllYoutubeRequestLink from "~/app/(v2)/requests/youtube/Link";
+import LinkRegisterSemitag from "~/app/[locale]/(application)/editor/semitags/Link";
+import TagRegisterPageLink from "~/app/[locale]/(application)/editor/tags/Link";
+import { AllVideosPageLink } from "~/app/[locale]/(application)/mads/Link";
+import AllBilibiliRequestLink from "~/app/[locale]/(application)/requests/bilibili/Link";
+import AllNicovideoRequestsPageLink from "~/app/[locale]/(application)/requests/nicovideo/Link";
+import AllSoundcloudRequestLink from "~/app/[locale]/(application)/requests/soundcloud/Link";
+import AllYoutubeRequestLink from "~/app/[locale]/(application)/requests/youtube/Link";
 import { useOpenInput } from "~/components/FormWidget";
 import {
   BilibiliPictogram,

app/(v2)/GlobalNavUserPart.tsx → app/[locale]/(application)/GlobalNavUserPart.tsx

@@ -3,11 +3,11 @@
 import clsx from "clsx";
 import { CSSProperties } from "react";
 
-import MyLikesPageLink from "~/app/(v2)/me/likes/Link";
-import MyTopPageLink from "~/app/(v2)/me/Link";
-import MyMylistsPageLink from "~/app/(v2)/me/mylists/Link";
-import NotificationsPageLink from "~/app/(v2)/notifications/Link";
-import SettingPageLink from "~/app/(v2)/settings/Link";
+import MyLikesPageLink from "~/app/[locale]/(application)/me/likes/Link";
+import MyTopPageLink from "~/app/[locale]/(application)/me/Link";
+import MyMylistsPageLink from "~/app/[locale]/(application)/me/mylists/Link";
+import NotificationsPageLink from "~/app/[locale]/(application)/notifications/Link";
+import SettingPageLink from "~/app/[locale]/(application)/settings/Link";
 import { LoginLink, LogoutLink } from "~/components/AuthLink";
 import { SignInPictogram } from "~/components/Pictogram";
 import { UserIcon } from "~/components/UserIcon";

app/(v2)/home/page.tsx → app/[locale]/(application)/home/page.tsx

@@ -1,12 +1,23 @@
 import { withPageAuthRequired } from "@auth0/nextjs-auth0";
 import clsx from "clsx";
+import { Metadata } from "next";
 import { Suspense } from "react";
 
+import { getScopedI18n } from "~/locales/server";
+
 import MyLikesPageLink from "../me/likes/Link";
 import LikesSectionInner from "./LikesSectionInner";
 import { ModalOpener } from "./ModalOpener";
 import Timeline from "./Timeline";
 
+export async function generateMetadata(): Promise<Metadata> {
+  const t = await getScopedI18n("page.home");
+
+  return {
+    title: t("title"),
+  };
+}
+
 export default withPageAuthRequired(
   async () => {
     return (

app/(v2)/mads/[serial]/events/Event.tsx → app/[locale]/(application)/mads/[serial]/events/Event.tsx

@@ -2,7 +2,7 @@ import clsx from "clsx";
 import Image from "next/image";
 import React, { ReactNode } from "react";
 
-import UserPageLink from "~/app/(v2)/users/[name]/Link";
+import UserPageLink from "~/app/[locale]/(application)/users/[name]/Link";
 import Semitag from "~/components/CommonSemitag";
 import CommonTag from "~/components/CommonTag";
 import { UserIcon } from "~/components/UserIcon";

app/(v2)/mads/[serial]/page.tsx → app/[locale]/(application)/mads/[serial]/page.tsx

@@ -1,19 +1,27 @@
 import clsx from "clsx";
-import { request } from "graphql-request";
 import { Metadata } from "next";
 import { notFound } from "next/navigation";
+import { setStaticParamsLocale } from "next-international/server";
 import { Suspense } from "react";
 
+import mkGenerateStaticParams from "~/app/[locale]/mkGenerateStaticParams";
 import { graphql } from "~/gql";
 import { makeGraphQLClient, makeGraphQLClient2 } from "~/gql/fetch";
+import { getScopedI18n } from "~/locales/server";
 
 import SimilarVideos from "./SimilarVideos";
 
+type PageParams = {
+  locale: string;
+  serial: string;
+};
+
 export async function generateMetadata({
   params,
 }: {
-  params: { serial: string };
+  params: PageParams;
 }): Promise<Metadata> {
+  const t = await getScopedI18n("page.mad");
   const result = await makeGraphQLClient().request(
     graphql(`
       query MadPage_Metadata($serial: Int!) {
@@ -30,43 +38,50 @@ export async function generateMetadata({
   const { title, serial } = result.findMadBySerial;
 
   return {
-    title: `${title} | OtoMADB`,
+    title: t("title", { title }),
     openGraph: {
       type: "website",
-      siteName: "OtoMADB",
       url: `https://otomadb.com/mads/${serial}`,
-      title: `${title} | OtoMADB`,
     },
     twitter: {
       card: "summary_large_image",
-      title: `${title} | OtoMADB`,
       site: "@SnO2WMaN",
     },
   };
 }
 
-type PageParams = { serial: string };
-
 export async function generateStaticParams() {
-  return request(
-    process.env.GRAPHQL_API_ENDPOINT,
-    graphql(`
-      query VideoPage_GenerateStaticParams {
-        findVideos(first: 100) {
-          nodes {
-            serial
+  const pps = await (
+    await makeGraphQLClient2({})
+  )
+    .request(
+      graphql(`
+        query VideoPage_GenerateStaticParams {
+          findVideos(first: 100) {
+            nodes {
+              serial
+            }
           }
         }
-      }
-    `)
-  ).then((v) =>
-    v.findVideos.nodes.map(
-      (v) => ({ serial: v.serial.toString() }) satisfies PageParams
+      `)
     )
-  );
+    .then((r) =>
+      r.findVideos.nodes.map(
+        (v) =>
+          ({ serial: v.serial.toString() }) satisfies Omit<PageParams, "locale">
+      )
+    );
+
+  return mkGenerateStaticParams(pps) satisfies PageParams[];
 }
 
-export default async function Page({ params }: { params: PageParams }) {
+export default async function Page({
+  params: { serial, locale },
+}: {
+  params: PageParams;
+}) {
+  setStaticParamsLocale(locale);
+
   const result = (
     await makeGraphQLClient2({
       auth: "optional",
@@ -81,7 +96,7 @@ export default async function Page({ params }: { params: PageParams }) {
           }
         }
       `),
-      { serial: parseInt(params.serial, 10) }
+      { serial: parseInt(serial, 10) }
     )
     .then(({ findMadBySerial }) => findMadBySerial || notFound());
 

app/(v2)/mads/page.tsx → app/[locale]/(application)/mads/page.tsx

@@ -6,18 +6,19 @@ import CommonMadBlock from "~/components/CommonMadBlock";
 import Paginator from "~/components/Paginator";
 import { graphql } from "~/gql";
 import { makeGraphQLClient2 } from "~/gql/fetch";
+import { getScopedI18n } from "~/locales/server";
 
 export async function generateMetadata({
   searchParams,
 }: {
   searchParams: { page?: string };
 }): Promise<Metadata> {
+  const t = await getScopedI18n("page.mads");
   const page = searchParams.page ? parseInt(searchParams.page, 10) : 1;
 
   return {
-    title: `登録されている音MAD(${page}ページ目) | OtoMADB`,
+    title: t("title", { page }),
     openGraph: {
-      title: `登録されている音MAD(${page}ページ目) | OtoMADB`,
       url: `https://otomadb.com/mads${page === 1 ? "" : `?page=${page}`}`,
     },
   };

app/(v2)/me/likes/page.tsx → app/[locale]/(application)/me/likes/page.tsx

@@ -4,16 +4,21 @@ import type { Metadata } from "next";
 import { notFound } from "next/navigation";
 import * as z from "zod";
 
-import MylistRegistrations from "~/app/(v2)/users/[name]/mylists/[slug]/MylistRegistrations";
+import MylistRegistrations from "~/app/[locale]/(application)/users/[name]/mylists/[slug]/MylistRegistrations";
 import TwitterShareButton from "~/components/TwitterShareButton";
 import { graphql } from "~/gql";
 import { makeGraphQLClient } from "~/gql/fetch";
+import { getScopedI18n } from "~/locales/server";
 
 export const dynamic = "force-dynamic";
 
-export const metadata: Metadata = {
-  title: "あなたがいいねした音MAD",
-};
+export async function generateMetadata(): Promise<Metadata> {
+  const t = await getScopedI18n("page.meLikes");
+
+  return {
+    title: t("title"),
+  };
+}
 
 export default withPageAuthRequired(
   async ({ searchParams }) => {

app/(v2)/me/mylists/[slug]/page.tsx → app/[locale]/(application)/me/mylists/[slug]/page.tsx

@@ -3,13 +3,15 @@ import clsx from "clsx";
 import { notFound } from "next/navigation";
 import * as z from "zod";
 
-import MylistRegistrations from "~/app/(v2)/users/[name]/mylists/[slug]/MylistRegistrations";
+import MylistRegistrations from "~/app/[locale]/(application)/users/[name]/mylists/[slug]/MylistRegistrations";
 import TwitterShareButton from "~/components/TwitterShareButton";
 import { graphql } from "~/gql";
 import { makeGraphQLClient2 } from "~/gql/fetch";
 
 import { EditButton } from "./Edit";
 
+export const dynamic = "force-dynamic";
+
 export default withPageAuthRequired(
   async ({ params: unparsedParams, searchParams: unparsedSearchParams }) => {
     const params = z.object({ slug: z.string() }).safeParse(unparsedParams);

app/(v2)/me/mylists/page.tsx → app/[locale]/(application)/me/mylists/page.tsx

@@ -5,15 +5,20 @@ import type { Metadata } from "next";
 import { VideoThumbnail } from "~/components/VideoThumbnail";
 import { graphql } from "~/gql";
 import { makeGraphQLClient2 } from "~/gql/fetch";
+import { getScopedI18n } from "~/locales/server";
 
 import CreateMylistButton from "../likes/CreateMylistButton";
 import YouMylistPageLink from "./[slug]/Link";
 
 export const dynamic = "force-dynamic";
 
-export const metadata: Metadata = {
-  title: "あなたのマイリスト",
-};
+export async function generateMetadata(): Promise<Metadata> {
+  const t = await getScopedI18n("page.meMylists");
+
+  return {
+    title: t("title"),
+  };
+}
 
 export default withPageAuthRequired(
   async () => {

app/(v2)/me/page.tsx → app/[locale]/(application)/me/page.tsx

@@ -4,12 +4,17 @@ import type { Metadata } from "next";
 
 import { graphql } from "~/gql";
 import { makeGraphQLClient } from "~/gql/fetch";
+import { getScopedI18n } from "~/locales/server";
 
 export const dynamic = "force-dynamic";
 
-export const metadata: Metadata = {
-  title: "あなたがいいねした音MAD",
-};
+export async function generateMetadata(): Promise<Metadata> {
+  const t = await getScopedI18n("page.me");
+
+  return {
+    title: t("title"),
+  };
+}
 
 export default withPageAuthRequired(
   async () => {

app/(v2)/notifications/NicovideoRegistrationRequestAccepting.stories.tsx → app/[locale]/(application)/notifications/NicovideoRegistrationRequestAccepting.stories.tsx

@@ -1,7 +1,7 @@
 import { ResultOf } from "@graphql-typed-document-node/core";
 import { Meta, StoryObj } from "@storybook/react";
 
-import { MadPageLinkFragment as VideoPageLinkFragment } from "~/app/(v2)/mads/[serial]/Link";
+import { MadPageLinkFragment as VideoPageLinkFragment } from "~/app/[locale]/(application)/mads/[serial]/Link";
 import { Fragment as UserIconFragment } from "~/components/UserIcon";
 import { Fragment as VideoThumbnailFragment } from "~/components/VideoThumbnail";
 import { makeFragmentData } from "~/gql";

app/(v2)/notifications/NicovideoRegistrationRequestAccepting.tsx → app/[locale]/(application)/notifications/NicovideoRegistrationRequestAccepting.tsx

@@ -2,9 +2,9 @@
 
 import clsx from "clsx";
 
-import { MadPageLink } from "~/app/(v2)/mads/[serial]/Link";
-import NicovideoRequestLink from "~/app/(v2)/requests/nicovideo/[sourceId]/Link";
-import UserPageLink from "~/app/(v2)/users/[name]/Link";
+import { MadPageLink } from "~/app/[locale]/(application)/mads/[serial]/Link";
+import NicovideoRequestLink from "~/app/[locale]/(application)/requests/nicovideo/[sourceId]/Link";
+import UserPageLink from "~/app/[locale]/(application)/users/[name]/Link";
 import CommonMadBlock from "~/components/CommonMadBlock";
 import { AcceptPictogram } from "~/components/Pictogram";
 import { UserIcon } from "~/components/UserIcon";

app/(v2)/notifications/NotificationsSegment.tsx → app/[locale]/(application)/notifications/NotificationsSegment.tsx

@@ -3,8 +3,8 @@ import clsx from "clsx";
 import { Fragment, useCallback } from "react";
 import { useEffectOnce } from "react-use";
 
-import NicovideoRegistrationRequestAcceptingNotification from "~/app/(v2)/notifications/NicovideoRegistrationRequestAccepting";
-import NicovideoRegistrationRequestRejectingNotification from "~/app/(v2)/notifications/NicovideoRegistrationRequestRejecting";
+import NicovideoRegistrationRequestAcceptingNotification from "~/app/[locale]/(application)/notifications/NicovideoRegistrationRequestAccepting";
+import NicovideoRegistrationRequestRejectingNotification from "~/app/[locale]/(application)/notifications/NicovideoRegistrationRequestRejecting";
 import { FragmentType, graphql, useFragment } from "~/gql";
 
 export const NotificationsSegmentFragment = graphql(`

app/(v2)/notifications/page.tsx → app/[locale]/(application)/notifications/page.tsx

@@ -1,13 +1,23 @@
 import { getAccessToken, withPageAuthRequired } from "@auth0/nextjs-auth0";
 import clsx from "clsx";
+import { Metadata } from "next";
 
 import { graphql } from "~/gql";
 import { makeGraphQLClient } from "~/gql/fetch";
+import { getScopedI18n } from "~/locales/server";
 
 import NotificationsSegmentsController from "./NotificationsSegmentsController";
 
 export const dynamic = "force-dynamic";
 
+export async function generateMetadata(): Promise<Metadata> {
+  const t = await getScopedI18n("page.notifications");
+
+  return {
+    title: t("title"),
+  };
+}
+
 export default withPageAuthRequired(
   async () => {
     const { accessToken } = await getAccessToken();

app/(v2)/requests/RequestPageCommon.tsx → app/[locale]/(application)/requests/RequestPageCommon.tsx

@@ -1,6 +1,6 @@
 import clsx from "clsx";
 
-import UserPageLink from "~/app/(v2)/users/[name]/Link";
+import UserPageLink from "~/app/[locale]/(application)/users/[name]/Link";
 import CommonTagLink from "~/components/CommonTagLink";
 import { UserIcon } from "~/components/UserIcon";
 import { FragmentType, graphql, useFragment } from "~/gql";

app/(v2)/requests/RequestsPageCommon.tsx → app/[locale]/(application)/requests/RequestsPageCommon.tsx

@@ -1,7 +1,7 @@
 import clsx from "clsx";
 import { ReactNode } from "react";
 
-import UserPageLink from "~/app/(v2)/users/[name]/Link";
+import UserPageLink from "~/app/[locale]/(application)/users/[name]/Link";
 import CommonTag from "~/components/CommonTag";
 import { CoolImage } from "~/components/CoolImage";
 import Paginator from "~/components/Paginator";

app/(v2)/requests/bilibili/page.tsx → app/[locale]/(application)/requests/bilibili/page.tsx

@@ -4,6 +4,7 @@ import { notFound, redirect } from "next/navigation";
 
 import { graphql } from "~/gql";
 import { makeGraphQLClient } from "~/gql/fetch";
+import { getScopedI18n } from "~/locales/server";
 
 import NoRequests from "../NoRequests";
 import RegisterButton from "../RegisterButton";
@@ -14,12 +15,13 @@ export async function generateMetadata({
 }: {
   searchParams: { page?: string };
 }): Promise<Metadata> {
+  const t = await getScopedI18n("page.bilibiliRequests");
+
   const page = searchParams.page ? parseInt(searchParams.page, 10) : 1;
 
   return {
-    title: `リクエストされているbilibiliの音MAD(${page}ページ目) | OtoMADB`,
+    title: t("title", { page }),
     openGraph: {
-      title: `リクエストされているbilibiliの音MAD(${page}ページ目) | OtoMADB`,
       url: `https://otomadb.com/requests/nicovideo${
         page === 1 ? "" : `?page=${page}`
       }`,