feat: Generate OGP

package.json

@@ -1,6 +1,6 @@
 {
   "name": "linkle",
-  "version": "2.1.14",
+  "version": "2.2.0-alpha.1",
   "private": true,
   "scripts": {
     "dev": "next dev --turbopack",

src/app/api/clubs/[id]/route.ts

@@ -10,7 +10,11 @@ const endpoint = process.env.DB_API_ENDPOINT;
 export async function GET(request: Request, { params }: { params: Promise<{ id: string }> }) {
   const { id } = await params;
   const clubRes = await fetch(`${endpoint}/clubs/${id}`);
-  if (clubRes.status !== 200) return NextResponse.json({ status: clubRes.status });
+  if (clubRes.status !== 200)
+    return NextResponse.json(
+      { status: clubRes.status, message: clubRes.statusText },
+      { status: clubRes.status }
+    );
   const clubData = (await clubRes.json()) as Club;
   const session = await auth();
   const apiKey = request.headers.get("X-Api-Key");

src/app/clubs/[...slug]/page.tsx

@@ -1,14 +1,76 @@
 import { notFound, unauthorized } from "next/navigation";
-
 import ClubPage from "@/components/clubPage/main";
 import EditClub from "@/components/clubPage/edit";
 import { auth } from "@/auth";
-
 import { Suspense } from "react";
 import { CircularProgress, Stack, Typography } from "@mui/material";
 import { headers } from "next/headers";
+import Club from "@/models/Club";
+import CryptoJS from "crypto-js";
+import { Metadata } from "next";
+import { metadata as notFoundMetadata } from "@/app/not-found";
+import { metadata as forbiddenMetadata } from "@/app/forbidden";
+import { metadata as unauthorizedMetadata } from "@/app/unauthorized";
+
+export async function generateMetadata({ params }: { params: Promise<{ slug: string[] }> }) {
+  const session = await auth();
+  const slug = (await params).slug;
+  const fetchOption = {
+    method: "GET",
+    headers: {
+      "Content-Type": "application/json",
+      "X-Api-Key": CryptoJS.AES.encrypt(
+        session?.user?.email || "No Auth",
+        process.env.API_ROUTE_SECRET as string
+      ).toString(),
+    },
+  };
+  const headersData = await headers();
+  const host = headersData.get("host");
+  const protocol =
+    headersData.get("x-forwarded-proto") ?? host?.startsWith("localhost") ? "http" : "https";
+  const apiBase = `${protocol}://${host}`;
+  const res = await fetch(`${apiBase}/api/clubs/${slug[0]}`, fetchOption);
+  if (res.status == 401) return unauthorizedMetadata;
+  if (res.status == 404) return notFoundMetadata;
+  if (res.status == 403) return forbiddenMetadata;
+  const club = (await res.json()) as Club;
+  switch (slug[1]) {
+    case "edit":
+      if (session?.user?.email && club.owner?.includes(session?.user?.email)) {
+        return {
+          title: `同好会編集ページ - 同好会ポータル Linkle`,
+          description: "同好会の情報を編集します。",
+        } as Metadata;
+      }
+      return forbiddenMetadata;
+    case undefined:
+      return {
+        title: `${club.name} - 同好会ポータル Linkle`,
+        description: club.short_description,
+        openGraph: {
+          title: club.name,
+          description: club.short_description,
+          type: "website",
+          url: `${apiBase}/clubs/${slug[0]}`,
+          images: club.image,
+          siteName: "同好会ポータル Linkle",
+          locale: "ja_JP",
+        },
+        twitter: {
+          site: "@UniPro_digital",
+          cardType: "summary_large_image",
+          title: club.name,
+          description: club.short_description,
+          images: club.image,
+        },
+      } as Metadata;
+    default:
+      return notFoundMetadata;
+  }
+}
 
-export default async function Page({ params }: { params: Promise<{ slug: string }> }) {
+export default async function Page({ params }: { params: Promise<{ slug: string[] }> }) {
   const headersData = await headers();
   const host = headersData.get("host");
   const protocol =

src/components/clubPage/main.tsx

@@ -8,8 +8,6 @@ import { LongDescription } from "./md";
 import { use } from "react";
 import { getClubById } from "@/lib/server/club";
 import { forbidden, notFound, unauthorized } from "next/navigation";
-import UpdateMetadata from "@/components/TitleChange";
-import { Metadata } from "next";
 
 export default function Club({
   id,
@@ -26,29 +24,6 @@ export default function Club({
   if (club == "unauthorized") unauthorized();
   return (
     <>
-      <UpdateMetadata
-        metadata={
-          {
-            title: `${club.name}`,
-            description: `${club.short_description}`,
-            openGraph: {
-              title: `${club.name}`,
-              description: `${club.short_description}`,
-              type: "website",
-              url: `${process.env.DB_API_ENDPOINT}/clubs/${id}`,
-              images: club.image ?? undefined,
-              siteName: "同好会ポータル Linkle",
-            },
-            twitter: {
-              card: "summary_large_image",
-              site: "@UniPro_digital",
-              title: `${club.name}`,
-              description: `${club.short_description}`,
-              images: club.image ?? undefined,
-            },
-          } as Metadata
-        }
-      />
       {typeof club == "string" && (
         <Typography>
           {

src/lib/server/club.ts

@@ -23,7 +23,8 @@ export const getClubById = async (
     });
     if (res.status == 403) return "forbidden";
     const club = (await res.json()) as Club;
-    if (!club) return "notfound";
+    if (res.status == 401) return "unauthorized";
+    if (!club || res.status == 404) return "notfound";
     return club;
   } catch (e) {
     throw new Error(e as string);