Next.js 14 App Router 最佳实践

--- 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 示例 ```tsx // 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 能显著提升可维护性与性能。按本文模板组织元数据与正文，有利于后续统一管理与发布。