Next.js 14 App Router 完全指南

Next.js 14 App Router 完全指南

Next.js 14 的 App Router 带来了全新的开发体验。Server Components、Server Actions、嵌套 Layout——这些概念让 React 开发进入了一个新时代。

文件约定即路由

app/layout.js（根布局，必需）、page.js（页面组件）、loading.js（加载状态，自动被 Suspense 包裹）、error.js（错误边界）、not-found.js（404 页面）。app/blog/[slug]/page.js 自动映射到 /blog/:slug。

Server Components（默认）

App Router 中所有组件默认是 Server Component。可以直接访问数据库、文件系统、环境变量。使用 async/await 获取数据，无需 useEffect。不会增加客户端 JS bundle 体积。

Server Actions

用 'use server' 声明的异步函数，可以直接在表单的 action 属性中调用。替代了传统的 API Route + fetch 模式。自动处理 CSRF 保护、支持渐进增强、调用 revalidatePath 刷新缓存。

嵌套 Layout 与模板

layout.js 在路由切换时保持状态（持久化导航），template.js 每次路由切换都重新挂载。适合需要重置状态的场景。

流式渲染与 Suspense

使用 loading.js 实现页面级别的流式渲染——服务端可以先发送页面骨架，在数据就绪后流式传输内容。比传统的 SSR 有更快的 TTFB（首字节时间）。

总结

App Router 的核心创新：Server Components 减少客户端 JS、Server Actions 替代 API Routes、嵌套 Layout 实现持久化导航、流式渲染改善首屏体验。