feat: scaffold headless frontend integration per design doc

app/blog/[slug]/page.tsx

@@ -0,0 +1,35 @@
+import { notFound } from "next/navigation";
+import type { Metadata } from "next";
+import { getBlogBySlug } from "@/services/blog.service";
+import { BlockRenderer } from "@/blocks/BlockRenderer";
+
+interface BlogDetailPageProps {
+  params: Promise<{ slug: string }>;
+}
+
+export async function generateMetadata({
+  params,
+}: BlogDetailPageProps): Promise<Metadata> {
+  const { slug } = await params;
+  const post = await getBlogBySlug(slug).catch(() => null);
+  return { title: post?.title ?? "文章未找到" };
+}
+
+export default async function BlogDetailPage({ params }: BlogDetailPageProps) {
+  const { slug } = await params;
+  const post = await getBlogBySlug(slug).catch(() => null);
+
+  if (!post) {
+    notFound();
+  }
+
+  return (
+    <article className="mx-auto max-w-3xl px-6 py-24">
+      <h1 className="mb-4 text-4xl font-bold text-slate-900">{post.title}</h1>
+      {post.published_at && (
+        <p className="mb-12 text-sm text-slate-500">{post.published_at}</p>
+      )}
+      <BlockRenderer blocks={post.body} />
+    </article>
+  );
+}