Pagetransition

.gitignore

@@ -4,8 +4,8 @@
 /cloudflare-env.d.ts
 
 # generated docs section file lists (regenerated by npm run generateDocsMeta)
-/public/docs/**/sections.json
-/public/docs/languages.json
+/public/docs/**/sections.*
+/public/docs/languages.*
 
 # dependencies
 /node_modules

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

@@ -38,9 +38,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];
+
   // server componentなのでuseMemoいらない
   const path = { lang: lang, page: pageId };
   const sections = await getMarkdownSections(lang, pageId);
@@ -57,6 +61,8 @@ export default async function Page({
         splitMdContent={sections}
         langEntry={langEntry}
         pageEntry={pageEntry}
+        prevPage={prevPage}
+        nextPage={nextPage}
         path={path}
       />
     </ChatHistoryProvider>

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

@@ -6,6 +6,7 @@ import { Heading, StyledMarkdown } from "./markdown";
 import { useChatHistoryContext } from "./chatHistory";
 import { useSidebarMdContext } from "@/sidebar";
 import clsx from "clsx";
+import { PageTransition } from "./pageTransition";
 import {
   LanguageEntry,
   MarkdownSection,
@@ -22,6 +23,8 @@ interface PageContentProps {
   splitMdContent: MarkdownSection[];
   langEntry: LanguageEntry;
   pageEntry: PageEntry;
+  prevPage?: PageEntry;
+  nextPage?: PageEntry;
   path: PagePath;
 }
 export function PageContent(props: PageContentProps) {
@@ -149,6 +152,11 @@ export function PageContent(props: PageContentProps) {
           </div>
         </Fragment>
       ))}
+      <PageTransition
+        lang={path.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 { LangId, PageEntry } from "@/lib/docs";
+
+interface PageTransitionProps {
+  lang: LangId;
+  prevPage?: PageEntry;
+  nextPage?: PageEntry;
+}
+
+export function PageTransition({ lang, prevPage, nextPage }: PageTransitionProps) {
+  return (
+    <div className="flex justify-between gap-4 mt-12 pt-8 border-t border-base-content/10 min-w-1/2 max-w-200 col-span-2">
+      <div className="flex-1 flex">
+        {prevPage && (
+          <Link
+            href={`/${lang}/${prevPage.slug}`}
+            className="group flex-1 btn btn-ghost border-2 border-base-content/20 hover:border-primary flex flex-col items-start h-auto py-2 normal-case text-left"
+          >
+            <span className="text-xs text-base-content/60 font-normal group-hover:text-primary">前のページ</span>
+            <span className="text-sm md:text-base group-hover:text-primary">&laquo; {prevPage.name}</span>
+          </Link>
+        )}
+      </div>
+      <div className="flex-1 flex">
+        {nextPage && (
+          <Link
+            href={`/${lang}/${nextPage.slug}`}
+            className="group flex-1 btn btn-ghost border-2 border-base-content/20 hover:border-primary flex flex-col items-end h-auto py-2 normal-case text-right"
+          >
+            <span className="text-xs text-base-content/60 font-normal group-hover:text-primary">次のページ</span>
+            <span className="text-sm md:text-base group-hover:text-primary">{nextPage.name} &raquo;</span>
+          </Link>
+        )}
+      </div>
+    </div>
+  );
+}