ブログ一覧ページにもバックボタンを追加

src/app/blog/[slug]/page.tsx

@@ -1,8 +1,9 @@
 import { getAllPosts, getPostBySlug } from "@/lib/posts";
+import { BackButton } from "@/components/ui/buttons";
+import { notFound } from 'next/navigation';
 import { remark } from "remark";
 import html from "remark-html";
 import Link from "next/link";
-import { notFound } from 'next/navigation';
 
 type Props = {
     params: Promise<{ slug: string }>;
@@ -46,9 +47,7 @@ export default async function PostPage({ params }: Props) {
                     />
 
                     <footer className="border-t border-neutral-800 pt-6 mt-10">
-                        <Link href="/blog" className="mt-6 text-sm font-bold text-green-400 tracking-wide uppercase">
-                            → Back
-                        </Link>
+                        <BackButton />
                     </footer>
                 </article>
             </div>

src/app/blog/page.tsx

@@ -1,13 +1,16 @@
-import Link from "next/link";
-import Image from "next/image";
 import { getAllPosts } from "@/lib/posts";
+import { BackButton } from "@/components/ui/buttons";
+import Link from "next/link";
 
 export default async function BlogPage() {
     const posts = getAllPosts();
 
     return (
         <div className="text-neutral-100 py-20 px-6">
             <div className="max-w-3xl mx-auto">
+                <div className="flex items-center">
+                    <BackButton />
+                </div>
 
                 <ul className="mt-12 space-y-6">
                     {posts.map((post) => (
@@ -36,6 +39,8 @@ export default async function BlogPage() {
                     ))}
                 </ul>
             </div>
+
+
         </div>
     );
 }

src/components/ui/buttons.tsx

@@ -1,4 +1,7 @@
+"use client";
 import Link from "next/link";
+import { useRouter } from "next/navigation";
+import React from "react";
 
 export function GithubButton({ sublink }: { sublink: string }) {
     return (
@@ -15,7 +18,7 @@ export function GithubButton({ sublink }: { sublink: string }) {
     );
 }
 
-export function BookButton({ link, children }: { link: string, children: React.ReactNode }) {
+export function BookButton({ link, children }: { link: string; children: React.ReactNode }) {
     return (
         <Link
             href={link}
@@ -26,4 +29,30 @@ export function BookButton({ link, children }: { link: string, children: React.R
             <span>{children}</span>
         </Link>
     );
+}
+
+export function BackButton({ href, label = "Back" }: { href?: string; label?: string }) {
+    const router = useRouter();
+
+    const handleClick = (e: React.MouseEvent) => {
+        e.preventDefault();
+        if (href) {
+            router.push(href);
+        } else {
+            router.back();
+        }
+    };
+
+    return (
+        <button
+            onClick={handleClick}
+            aria-label={label}
+            className="inline-flex items-center gap-3 px-3 py-2 bg-neutral-900/80 border border-neutral-800 text-neutral-100 rounded-lg shadow-sm hover:border-green-500/60 hover:text-green-300"
+        >
+            <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden>
+                <path fillRule="evenodd" d="M9.707 14.707a1 1 0 01-1.414 0l-5-5a1 1 0 010-1.414l5-5a1 1 0 111.414 1.414L6.414 9H17a1 1 0 110 2H6.414l3.293 3.293a1 1 0 010 1.414z" clipRule="evenodd" />
+            </svg>
+            <span className="text-sm font-medium">{label}</span>
+        </button>
+    );
 }