Next.js 14 Server Actions 实战：告别 API Routes

Server Actions 是 Next.js 14 中最激动人心的特性之一。它让我们不再需要手动创建 API Endpoints 来处理数据变更。

1. 基础表单提交

在 Server Component 中直接定义 Action：

typescript
'use server'

import { revalidatePath } from 'next/cache'
import { db } from '@/lib/db'

export async function createPost(formData: FormData) {
  const title = formData.get('title')
  const content = formData.get('content')

  await db.post.create({
    data: {
      title: title as string,
      content: content as string,
    },
  })

  revalidatePath('/posts')
}

在 Client Component 中使用：

tsx
'use client'

import { createPost } from '@/app/actions'

export function CreatePost() {
  return (
    <form action={createPost}>
      <input type="text" name="title" className="border p-2" />
      <textarea name="content" className="border p-2" />
      <button type="submit">发布</button>
    </form>
  )
}

2. 乐观更新 (Optimistic Updates)

使用 useOptimistic 钩子实现即时反馈。

tsx
'use client'

import { useOptimistic } from 'react'
import { incrementLike } from '@/app/actions'

export function LikeButton({ post }: { post: Post }) {
  const [optimisticLikes, addOptimisticLike] = useOptimistic(
    post.likes,
    (state, newLike: number) => state + newLike
  )

  return (
    <form action={async () => {
      addOptimisticLike(1)
      await incrementLike(post.id)
    }}>
      <button type="submit">
        ❤️ {optimisticLikes}
      </button>
    </form>
  )
}
展开代码 (22 行)

3. 错误处理与 Pending 状态

使用 useFormStatus 和 useFormState。

tsx
'use client'

import { useFormStatus } from 'react-dom'

export function SubmitButton() {
  const { pending } = useFormStatus()
 
  return (
    <button type="submit" disabled={pending}>
      {pending ? '提交中...' : '提交'}
    </button>
  )
}