Pagetransition

app/[lang]/[pageId]/page.tsx

@@ -33,9 +33,13 @@ export default async function Page({
   const { lang, pageId } = await params;
   const pagesList = await getPagesList();
   const langEntry = pagesList.find((l) => l.id === lang);
-  const pageEntry = langEntry?.pages.find((p) => p.slug === pageId);
+  const pageEntryIndex = langEntry?.pages.findIndex((p) => p.slug === pageId) ?? -1;
+  const pageEntry = langEntry?.pages[pageEntryIndex];
   if (!langEntry || !pageEntry) notFound();
 
+  const prevPage = langEntry.pages[pageEntryIndex - 1];
+  const nextPage = langEntry.pages[pageEntryIndex + 1];
+
   const docsId = `${lang}/${pageId}`;
   const sections = await getMarkdownSections(lang, pageId);
 
@@ -57,6 +61,8 @@ export default async function Page({
         docs_id={docsId}
         lang={lang}
         pageId={pageId}
+        prevPage={prevPage}
+        nextPage={nextPage}
       />
     </ChatHistoryProvider>
   );

app/[lang]/[pageId]/pageContent.tsx

@@ -7,6 +7,7 @@ import { useChatHistoryContext } from "./chatHistory";
 import { useSidebarMdContext } from "@/sidebar";
 import clsx from "clsx";
 import { MarkdownSection, PageEntry } from "@/lib/docs";
+import { PageTransition } from "./pageTransition";
 
 // MarkdownSectionに追加で、ユーザーが今そのセクションを読んでいるかどうか、などの動的な情報を持たせる
 export type DynamicMarkdownSection = MarkdownSection & {
@@ -21,6 +22,8 @@ interface PageContentProps {
   pageId: string;
   // TODO: チャット周りのid管理をsectionIdに移行し、docs_idパラメータを削除
   docs_id: string;
+  prevPage: PageEntry;
+  nextPage: PageEntry;
 }
 export function PageContent(props: PageContentProps) {
   const { setSidebarMdContent } = useSidebarMdContext();
@@ -145,6 +148,11 @@ export function PageContent(props: PageContentProps) {
           </div>
         </Fragment>
       ))}
+      <PageTransition
+        lang={props.lang}
+        prevPage={props.prevPage}
+        nextPage={props.nextPage}
+      />
       {isFormVisible ? (
         // sidebarの幅が80であることからleft-84 (sidebar.tsx参照)
         // replがz-10を使用することからそれの上にするためz-20

app/[lang]/[pageId]/pageTransition.tsx

@@ -0,0 +1,37 @@
+import Link from "next/link";
+import { PageEntry } from "@/lib/docs";
+
+interface PageTransitionProps {
+  lang: string;
+  prevPage: PageEntry;
+  nextPage: PageEntry;
+}
+
+export function PageTransition({ lang, prevPage, nextPage }: PageTransitionProps) {
+  return (
+    <div className="flex justify-between items-center mt-12 pt-8 border-t border-base-content/10 w-full col-span-2">
+      <div>
+        {prevPage && (
+          <Link
+            href={`/${lang}/${prevPage.slug}`}
+            className="btn btn-ghost border-2 border-base-content/20 hover:border-yellow-400 flex flex-col items-end h-auto py-2 normal-case text-right"
+          >
+            <span className="text-xs text-base-content/60 font-normal">前のページ</span>
+            <span className="text-sm md:text-base">&laquo; {prevPage.title}</span>
+          </Link>
+        )}
+      </div>
+      <div>
+        {nextPage && (
+          <Link
+            href={`/${lang}/${nextPage.slug}`}
+            className="btn btn-ghost border-2 border-base-content/20 hover:border-yellow-400 flex flex-col items-end h-auto py-2 normal-case text-right"
+          >
+            <span className="text-xs text-base-content/60 font-normal">次のページ</span>
+            <span className="text-sm md:text-base">{nextPage.title} &raquo;</span>
+          </Link>
+        )}
+      </div>
+    </div>
+  );
+}