From 0d3d3ed0d69381d11127d37af37b2bcc7d05b04b Mon Sep 17 00:00:00 2001
From: itta <airi.itakura@gmail.com>
Date: Wed, 19 Aug 2026 21:07:30 +0900
Subject: [PATCH] =?UTF-8?q?=E3=83=95=E3=83=A9=E3=83=B3=E3=82=B9=E8=AA=9E?=
 =?UTF-8?q?=E3=81=AE=E5=90=84=E3=82=BB=E3=82=AF=E3=82=B7=E3=83=A7=E3=83=B3?=
 =?UTF-8?q?=E3=81=AB=E5=89=8D=E5=BE=8C=E3=81=AE=E3=83=9A=E3=83=BC=E3=82=B8?=
 =?UTF-8?q?=E3=81=AB=E7=A7=BB=E5=8B=95=E3=81=A7=E3=81=8D=E3=82=8B=E3=83=9C?=
 =?UTF-8?q?=E3=82=BF=E3=83=B3=E3=82=92=E4=BD=9C=E3=82=8A=E3=81=BE=E3=81=97?=
 =?UTF-8?q?=E3=81=9F=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/learn/french/SectionNav.tsx | 45 +++++++++++++++++++++++++++++++++
 app/learn/french/layout.tsx     |  8 +++++-
 2 files changed, 52 insertions(+), 1 deletion(-)
 create mode 100644 app/learn/french/SectionNav.tsx

diff --git a/app/learn/french/SectionNav.tsx b/app/learn/french/SectionNav.tsx
new file mode 100644
index 0000000..626d457
--- /dev/null
+++ b/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>
+  );
+}
\ No newline at end of file
diff --git a/app/learn/french/layout.tsx b/app/learn/french/layout.tsx
index 4467384..58c7d74 100644
--- a/app/learn/french/layout.tsx
+++ b/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>
   );
 }