使用Next.js 14和Server Actions构建全栈应用：实战教程

使用Next.js 14和Server Actions构建全栈应用

Next.js 14引入了稳定版Server Actions，让你可以直接在React组件中编写服务端逻辑——无需API路由。本教程将从零开始构建一个任务管理应用。

前提条件

• Node.js 18+
• 基本的React和TypeScript知识

1. 项目初始化

npx create-next-app@latest task-app --typescript --tailwind --app
cd task-app
npm install prisma @prisma/client
npx prisma init --datasource-provider sqlite

2. 定义数据库Schema

编辑 prisma/schema.prisma：

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "sqlite"
  url      = "file:./dev.db"
}

model Task {
  id        Int      @id @default(autoincrement())
  title     String
  completed Boolean  @default(false)
  createdAt DateTime @default(now())
}

运行迁移：

npx prisma migrate dev --name init

3. 创建Prisma客户端

创建 lib/prisma.ts：

import { PrismaClient } from '@prisma/client'

const globalForPrisma = globalThis as unknown as { prisma: PrismaClient }

export const prisma = globalForPrisma.prisma ?? new PrismaClient()

if (process.env.NODE_ENV !== 'production') globalForPrisma.prisma = prisma

4. 构建Server Actions

创建 app/actions.ts：

'use server'

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

export async function addTask(formData: FormData) {
  const title = formData.get('title') as string
  if (!title?.trim()) return

  await prisma.task.create({ data: { title: title.trim() } })
  revalidatePath('/')
}

export async function toggleTask(id: number) {
  const task = await prisma.task.findUnique({ where: { id } })
  if (!task) return

  await prisma.task.update({
    where: { id },
    data: { completed: !task.completed },
  })
  revalidatePath('/')
}

export async function deleteTask(id: number) {
  await prisma.task.delete({ where: { id } })
  revalidatePath('/')
}

5. 构建UI

替换 app/page.tsx：

import { prisma } from '@/lib/prisma'
import { addTask, toggleTask, deleteTask } from './actions'

export default async function Home() {
  const tasks = await prisma.task.findMany({
    orderBy: { createdAt: 'desc' },
  })

  return (
    <main className="max-w-xl mx-auto p-8">
      <h1 className="text-3xl font-bold mb-6">任务管理器</h1>

      <form action={addTask} className="flex gap-2 mb-8">
        <input
          name="title"
          placeholder="添加新任务..."
          className="flex-1 border rounded px-3 py-2"
          required
        />
        <button
          type="submit"
          className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700"
        >
          添加
        </button>
      </form>

      <ul className="space-y-2">
        {tasks.map((task) => (
          <li key={task.id} className="flex items-center gap-3 p-3 border rounded">
            <form action={toggleTask.bind(null, task.id)}>
              <button type="submit">
                <span className={task.completed ? 'line-through text-gray-400' : ''}>
                  {task.completed ? '☑' : '☐'} {task.title}
                </span>
              </button>
            </form>
            <form action={deleteTask.bind(null, task.id)} className="ml-auto">
              <button type="submit" className="text-red-500 hover:text-red-700">
                ✕
              </button>
            </form>
          </li>
        ))}
      </ul>

      <p className="mt-6 text-sm text-gray-500">
        共{tasks.length}个任务 · 已完成{tasks.filter(t => t.completed).length}个
      </p>
    </main>
  )
}

6. 运行应用

npm run dev

打开 http://localhost:3000，你现在拥有一个功能完整的全栈应用：

• ✅ 服务端渲染
• ✅ 数据库持久化（SQLite + Prisma）
• ✅ Server Actions（无需API路由）
• ✅ 自动重新验证

核心对比

• 传统API方式：需要 fetch() + API路由，手动类型定义
• Server Actions方式：直接调用函数，端到端TypeScript类型安全

Server Actions极大地简化了全栈React开发。生产环境中，请添加输入验证（如Zod）、错误处理和身份认证。

下一步

• 使用 Zod 添加表单验证
• 集成 NextAuth.js 实现身份认证
• 部署到 Vercel 并使用PostgreSQL数据库

---

由Techsfree IT Consulting发布 — 构建更好的Web体验。