返回博客
前端
2026-03-151 min

用 Next.js 15 构建全栈应用的实践笔记

App Router、Server Actions 与数据获取的取舍……

用 Next.js 15 构建全栈应用的实践笔记

App Router 的得与失

Next.js 15 的 App Router 带来了嵌套布局、流式渲染与 Server Components,但学习曲线也随之变陡。最大的心智负担在于分清"哪段代码在服务端跑、哪段在客户端跑"。

Server Actions

tsx
"use server";
export async function createPost(formData: FormData) {
  const title = formData.get("title");
  await db.post.create({ data: { title } });
  revalidatePath("/blog");
}

数据获取

优先在 Server Component 里 await 数据库,再用 props 传给客户端组件。避免在客户端组件里直接调 DB——那是 Server Action 的职责。

Next.js全栈App Router