按理说，

：2024年，Next.js 就是 React 的“默认答案”

如果你还在用 Vite + React Router + 手写 API 的方式搭建新项目。我需要告诉你一个残酷的事实：这套组合在2024年已经落后了。

不是说它们不好，而是 Next.js 已经将前端开发的“默认配置”彻底 从 Next.js 13 引入 App Router 开始。到14.x版本的持续打磨，Next.js 已经从一个“服务端渲染框架”进化为一个完整的全栈应用网站。

Pages Router 的问题在于：它诞生于 React Server Components 之前。 所有组件都要在浏览器端 hydration。即使只是渲染一段静态文本，也要把完整的组件代码发送到客户端。而 App Router 默认使用 React Server Components。服务端组件只在服务器上运行，永远不会出现在你的 JavaScript bundle 中。真实项目的基准测试显示，从 Pages Router 迁移到 App Router 后数据密集型页面的 bundle 体积减少了 60%~80%。

⚠️ 使用者痛点警告：如果你仍然坚持使用 Pages Router 或传统前后端分离架构：

• ❌ 大量无必要客户端代码导致首屏渲染慢、SEO差
• ❌ 需要维护单独API服务器增加运维复杂度
• ❌ 前后端数据同步问题频发导致状态管理复杂
• ❌ 架构升级成本高难以跟上技术发展

说到第一部分。App Router vs Pages Router——根本性的范式转移

在开始写代码之前，必须先理解这个根本性的转变。 不过，

默认渲染客户端 " col""="" "style="">服务端组件

维度	Pages Router	App Router
数据获取	`getServerSideProps`、`getStaticProps`	组件内直接 `async/await`
数据变更	独立 API 路由 + 客户端 fetch	Server Actions
布局	单个 `_app.tsx` 全局包裹	嵌套 `layout.tsx`。逐层复用
流式渲染	不支持内置	配合 `` 支持

Pages Router 的主要问题是“一刀切”:所有页面组件都要在客户端 hydration,无论是否需要交互。这代表着大量只负责展示静态内容的组件也被迫打包进客户端 bundle。话说回来，

App Router 的主要思想是“按需交互”::默认所有组件跑在服务器上。只有明确标记 `"use client"` 的组件才会进入客户端 bundle。

创建新项目 

 npx create-next-app@latest my-app --typescript --app --eslint --tailwind --src-dir
 cd my-app
`--app` 标志确保生成的是 `app/` 目录而非 `pages/` .生成结构如下:
my-app/
src/
app/
layout.tsx ← 根布局
page.tsx ← 首页路由 "/"
prisma/ ← 稍后添加
next.config.ts

至于第二部分。App Router 的文件程序路由 

: : 


 app/page.tsx  → / 

 app/dashboard/page.tsx  → /dashboard 

 app/blog//page.tsx  → /blog/:slug 


嵌套布局的观点是，Layout 的威力

{posts.map(post => ( li key={post.id}>{post.title}) )} ) } 没有 getServerSideProps 没有 useEffect 没有状态管理库. 数据获取服务器随 HTML 一起到达浏览器. 何时使用 Client Component?当需要交互事件处理 useState useEffect 浏览器 API 时文顶部添加 use client 指令 : 'use client' import { useState } from 'react' export default function LikeButton { const useState return ( button onClick={ => setCount}> ❤️ {count} button>) } Server与Client协作模式 常用方法 :父组件服务获取数据通过 props传递给需要交互子组: // app//page.tsx —— Server Component import LikeButton from '@/app/ui/like-button' import { getPost } from '@/lib/data' export default async function Page { const post await getPost return ( div h1>{post.title} h1 p>{post.content} p {/*只有这个按钮是 Client*/} LikeButton likes={post.likes}/ div>) } 这种模式让既享受渲染性能优势又保有交互灵活. 说到第四部分，Server Actions消灭 API 路由 这是最令人兴奋特性之一.Server Actions让直接写后逻辑无创独立API路由. 什么是 Server Action?Server Action 是一个服务执异步函数通过 use server 指令标记 : // lib/actions.ts 'use server' import auth from '@/lib/auth' export async function createPost { const session await auth if throw new Error const title formData.get const content formData.get //直接操作数据库 db.post.create //重新验证缓存 revalidatePath redirect} 表单中使用 Server Action import createPost from '@/lib/actions' export default function NewPostPage { return ( form action={createPost}> input name title placeholder标题 required /> textarea name content placeholder内容 /> button type submit 提交 button>) form>) 这样简单.不需写API方法不需手动 fetch 不需处理 loading状态. 渐进提高 Progressive Enhancement ) Server Actions 支持渐进提高即使未加载禁用表单依然正常提交.Next一次往返同时返回更新UI和新. 警告 ⚠️ 安全警告 Server Actions可以身份授权: export async function deletePost {'use server' const session await auth if throw new Error const id formData.get //验证权限 post db.post.findUnique if throw new Error db.post.delete revalidatePath} 第五部分这方面。缓存机制性能双刃剑) Next缓存机功能比较强但易踩坑.理解它关键高性能应用. 四层缓存程序)

缓存机制	缓存内容	存储位置	生命周期
Request Memoization 函数返回值	服务单次请求
Data Cache 数据	服务持久化可重新验证
Full Route Cache HTML RSC Payload	服务持久化可重新验证
Route Cache RSC Payload	客户浏览期间)

默认行为能就.会静态渲柔然并缓数据请求除非主动退出. 控制关键 API) // . 按时间重新验证 ISR fetch // . 按需重新验证 import revalidatePath revalidateTag from 'next/cache' // 方法级别 revalidatePath //标签级别更精细 revalidateTag // .完全跳过缓存 fetch Next.js +显式缓模型) 引入显式让开发者自定义哪些内容需要还有何时重新. 解决长期痛点部署出问题分清代码还是框架锅. 第六部分部署与常用方法) Vercel 零配置部署) Vercel 是官方网站支持零配置当推送代码时自识别Next应用最优设置. 对于个人开发者提供每月免费小时资源支持静态网站Serve函数及全栈应用. // 本地 local build vercel build //直接 vercel prod ) 生产检查清单) Next官提供详细实践: 自动调整无需配):

• Server Components 默启减少bundle
• 自动分割按段 segments )
• 预取 Link进入视口时自动预加载 ) *静态渲柔并缓存 )

从时建议)来看，

• Layouts共享UI实现局部渲柔 )
• Link而 a )
• next/image自动图片 )
• next/font字体加载 )

项目常用方法)

生产级应该将业逻辑共规则外集成与分离:

src/ app/ # 路层页面布局处理) components/ #可复 UI) lib/ #业逻辑工具函数) lib/actions/ #Actions ) lib/db/ #操作) lib/auth/ #认证逻辑) types/ #Type类型定义）

第七部分完整示例博客应用）

把以上概念整合成博：

src/ app/ layout.tsx #根布局 page.jsx #首页 posts/ page.jsx #文章列表 / page.jsx #文章详情 new/ page.jsx #创建文章含Action表单） lib/ actions/ posts.ts #'use server')) db/ index.ts #'index.db连接)) components/ LikeButton.jsx #'client Component)) CommentForm.jsx #'client +Action ))

。

---