---

title: Next.js 14 App Router 最佳实践

keywords:

• Next.js 14
• App Router
• Server Actions
• React 18
• Edge
• 性能优化

description: 使用 Next.js 14 的 App Router 构建现代前端的最佳实践，覆盖路由、数据获取、Server Actions 与性能优化，帮助团队稳定交付。

tech_params:

Next.js: 14.x

React: 18.x

Node.js: '>=18.17'

Bun: '>=1.0'

Deploy: Vercel 或 Node 适配 Edge Runtime

last_verified: 2025-11-25

categories:

• 文章资讯
• 技术教程

---

概览

Next.js 14 引入稳定的 App Router 与 Server Actions，结合 React 18 的 RSC（服务端组件）能力，为复杂应用提供更佳的开发与性能体验。本文提供可落地的项目结构、数据策略与性能优化建议。

为什么选择 App Router

• 更清晰的文件路由与并行/拦截路由能力
• 原生 RSC 支持，减少客户端 bundle 体积
• Server Actions 简化表单/数据提交，无需额外 API 层

目录结构示例

app/
  layout.tsx
  page.tsx
  dashboard/
    page.tsx
    @modal/(..)settings/page.tsx
  api/route.ts
components/
lib/

数据获取策略

• 使用 fetch 配合 next 选项：{ revalidate: 60 } 实现增量静态生成
• 按需设置 dynamic = 'force-dynamic' 或 revalidatePath 控制缓存与失效
• 对必须在客户端渲染的组件使用 "use client"

Server Actions 示例

// app/actions.ts
"use server"
import { revalidatePath } from "next/cache"

export async function saveProfile(data: FormData) {
  // 写入数据库
  // ...
  revalidatePath("/dashboard")
}

在客户端组件中直接调用 saveProfile 以取代传统 fetch('/api')。

性能优化要点

• 图片与字体使用 Next 内置优化组件
• 合理拆分路由与组件，充分利用 RSC 减少客户端代码
• 开启 experimental.optimizeCss 与 Bundle 分析，避免重复依赖

常见坑点

• Node 版本需满足 >=18.17
• 第三方库若依赖浏览器 API，需放置在客户端组件中
• Edge Runtime 与 Node Runtime 的差异需提前评估

结论

采用 App Router 与 Server Actions 能显著提升可维护性与性能。按本文模板组织元数据与正文，有利于后续统一管理与发布。