update: ssr metadata for blog page

qqpann · Dec 17, 2024 · 19772aa · 19772aa
1 parent b8b37d6
commit 19772aa
Showing 1 changed file with 61 additions and 31 deletions.
diff --git a/www/app/[locale]/blog/[id]/page.tsx b/www/app/[locale]/blog/[id]/page.tsx
@@ -1,50 +1,80 @@
-import Head from "next/head";
-import React from "react";
+import { Metadata } from "next";
+import { notFound } from "next/navigation";
 import { BlogPageDetail } from "~/components/blog/detail";
 import { nc } from "~/src/notcms/schema";
 
-export const dynamic = "auto";
-export const revalidate = 10;
+interface PageProps {
+  params: { id: string };
+}
+
+export async function generateStaticParams() {
+  const [pages, error] = await nc.query.blog.list();
 
-export default async function Page({
+  if (error || !pages) {
+    console.error("Failed to fetch blog list:", error);
+    return [];
+  }
+
+  // 静的に生成するパスのリスト
+  return pages
+    .filter((p) => p.properties.published)
+    .map((page: any) => ({
+      id: page.id,
+    }));
+}
+
+// SEOメタタグ用の動的Metadata
+export async function generateMetadata({
   params,
-}: {
-  params: Promise<{ id: string }>;
-}) {
-  const { id } = await params;
+}: PageProps): Promise<Metadata> {
+  const { id } = params;
+  const [page, error] = await nc.query.blog.get(id);
+
+  if (error || !page) {
+    return {
+      title: "Page Not Found",
+    };
+  }
+
+  const thumbnailUrl =
+    page.properties.thumbnails?.[0] ?? "/opengraph-image.jpg";
+
+  return {
+    title: page.title ?? "Blog Page",
+    description: page.properties.description ?? "Blog post",
+    openGraph: {
+      title: page.title ?? "Blog Page",
+      description: page.properties.description ?? "Blog post",
+      images: [{ url: thumbnailUrl }],
+      type: "article",
+    },
+    twitter: {
+      card: "summary_large_image",
+      title: page.title ?? "Blog Page",
+      description: page.properties.description ?? "Blog post",
+      images: [thumbnailUrl],
+    },
+  };
+}
+
+export default async function Page({ params }: PageProps) {
+  const { id } = params;
   const [page, error] = await nc.query.blog.get(id);
-  if (error) return <div>{error.toString()}</div>;
-  if (!page) return <div>Page not found</div>;
+
+  if (error || !page) {
+    notFound(); // 404ページを表示
+  }
 
   const writerId = page.properties.writers?.[0];
   const [writer] = writerId
     ? await nc.query.writers.get(writerId)
     : [undefined];
 
   const thumbnailUrl =
-    page.properties.thumbnails?.[0] ?? "/opengraph-image.jpg"; // サムネイル画像
+    page.properties.thumbnails?.[0] ?? "/opengraph-image.jpg";
 
   return (
     <>
-      <Head>
-        <title>{page.title ?? "Blog Page"}</title>
-        <meta property="og:title" content={page.title ?? "Blog Page"} />
-        <meta
-          property="og:description"
-          content={page.properties.description ?? "Blog post"}
-        />
-        <meta property="og:image" content={thumbnailUrl} />
-        <meta property="og:type" content="article" />
-
-        <meta name="twitter:card" content="summary_large_image" />
-        <meta name="twitter:title" content={page.title ?? "Blog Page"} />
-        <meta
-          name="twitter:description"
-          content={page.properties.description ?? "Blog post"}
-        />
-        <meta name="twitter:image" content={thumbnailUrl} />
-      </Head>
-
       <BlogPageDetail page={page} writer={writer} />
     </>
   );