存在しないドキュメントはfetchせず404を返すように & 404ページのカスタマイズ

Author: na-trium-144

app/[docs_id]/page.tsx

@@ -7,7 +7,7 @@ import { splitMarkdown } from "./splitMarkdown";
 import { PageContent } from "./pageContent";
 import { ChatHistoryProvider } from "./chatHistory";
 import { getChatFromCache } from "@/lib/chatHistory";
-import { getLanguageName } from "@/pagesList";
+import { getLanguageName, pagesList } from "@/pagesList";
 
 async function getMarkdownContent(docs_id: string): Promise<string> {
   try {
@@ -54,6 +54,20 @@ export async function generateMetadata({
   };
 }
 
+export function generateStaticParams() {
+  // 存在するページのリストを返す https://nextjs.org/docs/app/api-reference/functions/generate-static-params
+  return pagesList.reduce(
+    (acc, page) => {
+      page.pages.forEach((p) => {
+        acc.push({ docs_id: `${page.id}-${p.id}` });
+      });
+      return acc;
+    },
+    [] as { docs_id: string }[]
+  );
+}
+export const dynamicParams = false;
+
 export default async function Page({
   params,
 }: {

app/layout.tsx

@@ -27,7 +27,7 @@ export default function RootLayout({
         {/* mocha.css がbodyに背景色などを設定してしまうので、それを上書きしている */}
         <AutoAnonymousLogin />
         <SidebarMdProvider>
-          <div className="drawer lg:drawer-open">
+          <div className="drawer lg:drawer-open min-h-screen">
             <input
               id="drawer-toggle"
               type="checkbox"

app/not-found.tsx

@@ -0,0 +1,14 @@
+import Link from "next/link";
+
+export default function NotFound() {
+  return (
+    <div className="p-4 flex-1 flex flex-col items-center justify-center">
+      <h1 className="text-2xl font-bold mb-4">404</h1>
+      <p>指定されたページが見つかりません。</p>
+      <div className="divider w-80 max-w-full self-auto!" />
+      <Link href="/" className="btn btn-primary">
+        トップに戻る
+      </Link>
+    </div>
+  );
+}