pagination

app/learn/french/SectionNav.tsx

@@ -0,0 +1,45 @@
+
+
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import type { SectionSummary } from "@/app/learn/content";
+
+export default function SectionNav({
+  sections,
+}: {
+  sections: SectionSummary[];
+}) {
+  const pathname = usePathname();
+  const currentSlug = pathname.split("/").pop();
+
+  const currentIndex = sections.findIndex(
+    (section) => section.sectionSlug === currentSlug
+  );
+
+  const prevSection = currentIndex > 0 ? sections[currentIndex - 1] : null;
+  const nextSection =
+    currentIndex >= 0 && currentIndex < sections.length - 1
+      ? sections[currentIndex + 1]
+      : null;
+
+  return (
+    <div className="mt-8 flex w-full max-w-3xl justify-between">
+      {prevSection ? (
+        <Link href={`/learn/french/${prevSection.sectionSlug}`}>
+          ← {prevSection.title}
+        </Link>
+      ) : (
+        <span />
+      )}
+      {nextSection ? (
+        <Link href={`/learn/french/${nextSection.sectionSlug}`}>
+          {nextSection.title} →
+        </Link>
+      ) : (
+        <span />
+      )}
+    </div>
+  );
+}

app/learn/french/layout.tsx

@@ -1,15 +1,20 @@
 import { getLanguage } from "@/app/learn/languages";
+import { getSections } from "@/app/learn/content";
 
+
+import SectionNav from "./SectionNav";
+// 
 const language = getLanguage("french");
 
 // フランス語セクション専用レイアウト
 // カード型コンテナで囲み、globals.css の .french-content で見出し・表・リストを装飾する
 // （他言語は components/SectionLayout.tsx の共通レイアウトのまま）
-export default function FrenchSectionLayout({
+export default async function FrenchSectionLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
+ const sections = await getSections("french");
   return (
     <main className="flex flex-1 flex-col items-center bg-zinc-50 px-6 py-16 dark:bg-black">
       <p className="text-sm font-medium text-zinc-500 dark:text-zinc-400">
@@ -18,6 +23,7 @@ export default function FrenchSectionLayout({
       <article className="french-content mt-8 w-full max-w-3xl rounded-2xl border border-black/[.08] bg-white p-8 text-left shadow-sm dark:border-white/[.145] dark:bg-zinc-950 sm:p-10">
         {children}
       </article>
+      <SectionNav sections={sections} />
     </main>
   );
 }