前端
2026-03-151 min
用 Next.js 15 构建全栈应用的实践笔记
App Router、Server Actions 与数据获取的取舍……
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