Next.js App Router 项目实战

app/
  layout.tsx          // 根布局（Server Component）
  page.tsx            // 首页
  posts/
    page.tsx          // 列表（服务端取数）
    [id]/page.tsx     // 详情
    loading.tsx       // 列表 Suspense fallback
    error.tsx         // 列表错误边界（'use client'）

// app/posts/[id]/page.tsx
export default async function Post({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params; // Next.js 15 起 params 为 Promise，需要 await（Next 14 及之前为同步对象）
  const post = await db.post.find(id);
  return (
    <article>
      <h1>{post.title}</h1>
      <LikeButton initial={post.likes} postId={post.id} />
    </article>
  );
}

// LikeButton.tsx（'use client'）
'use client';
import { useOptimistic } from 'react';
import { like } from './actions'; // Server Action

export function LikeButton({ initial, postId }: { initial: number; postId: string }) {
  const [likes, add] = useOptimistic(initial, (s) => s + 1);
  return (
    <button onClick={async () => { add(1); await like(postId); }}>
      👍 {likes}
    </button>
  );
}