Next.js 15 App Router全栈开发实战：从Pages Router迁移到现代React架构作者：Crown_22 | Hermes Agent 桌面程序开发者前言Next.js 13引入的App Router是React生态最大的架构变革之一。它用React Server Components（RSC）重新定义了前后端的边界，用Server Actions取代了传统的API Routes，用新的文件系统路由替代了Pages Router。作为一个从Pages Router迁移过来的开发者，我想分享这个过程中的真实体验——哪些改进确实好用，哪些地方让人困惑，以及生产环境中需要注意的坑。一、App Router vs Pages Router：核心差异1.1 目录结构对比# Pages Router（旧） pages/ ├── index.tsx → / ├── about.tsx → /about ├── blog/ │ ├── index.tsx → /blog │ └── [slug].tsx → /blog/:slug ├── api/ │ └── users.ts → /api/users └── _app.tsx → 全局布局 # App Router（新） app/ ├── layout.tsx → 根布局（替代_app.tsx） ├── page.tsx → / ├── about/ │ └── page.tsx → /about ├── blog/ │ ├── page.tsx → /blog │ └── [slug]/ │ └── page.tsx → /blog/:slug └── api/ └── users/ └── route.ts → /api/users（替代api/users.ts）1.2 核心理念变化概念Pages RouterApp Router渲染默认客户端渲染默认服务端渲染（RSC）数据获取getServerSideProps/getStaticProps直接在组件中async/await布局_app.tsx全局嵌套layout.tsx加载状态手动实现loading.tsx自动错误处理_error.tsxerror.tsx边界APIapi/目录route.ts二、Server Components vs Client Components这是App Router最重要的概念，也是最容易搞混的。2.1 Server Components（默认）// app/dashboard/page.tsx // 默认是Server Component，没有"use client"指令 import { db } from "@/lib/database" // 可以直接访问数据库！这个代码只在服务端运行 export default async function DashboardPage() { const users = await db.user.findMany() const stats = await db.analytics.getStats() return ( div h1仪表盘/h1 StatsCard data={stats} / UserList users={users} / /div ) }关键理解：Server Component的代码永远不会发送到浏览器。db.user.findMany()这样的代码可以安全地写在组件里，因为浏览器永远不会执行它。2.2 Client Components// app/components/SearchBox.tsx "use client" // 必须在文件顶部声明 import { useState, useEffect } from "react" export function SearchBox() { const [query, setQuery] = useState("") const [results, setResults] = useState([]) // 这些交互逻辑只能在Client Component中 useEffect(() = { if (query.length 2) { fetch(`/api/search?q=${query}`) .then(res = res.json()) .then(setResults) } }, [query]) return ( div input value={query} onChange={e = setQuery(e.target.value)} p
Next.js_15_App_Router全栈开发实战
Next.js 15 App Router全栈开发实战：从Pages Router迁移到现代React架构作者：Crown_22 | Hermes Agent 桌面程序开发者前言Next.js 13引入的App Router是React生态最大的架构变革之一。它用React Server Components（RSC）重新定义了前后端的边界，用Server Actions取代了传统的API Routes，用新的文件系统路由替代了Pages Router。作为一个从Pages Router迁移过来的开发者，我想分享这个过程中的真实体验——哪些改进确实好用，哪些地方让人困惑，以及生产环境中需要注意的坑。一、App Router vs Pages Router：核心差异1.1 目录结构对比# Pages Router（旧） pages/ ├── index.tsx → / ├── about.tsx → /about ├── blog/ │ ├── index.tsx → /blog │ └── [slug].tsx → /blog/:slug ├── api/ │ └── users.ts → /api/users └── _app.tsx → 全局布局 # App Router（新） app/ ├── layout.tsx → 根布局（替代_app.tsx） ├── page.tsx → / ├── about/ │ └── page.tsx → /about ├── blog/ │ ├── page.tsx → /blog │ └── [slug]/ │ └── page.tsx → /blog/:slug └── api/ └── users/ └── route.ts → /api/users（替代api/users.ts）1.2 核心理念变化概念Pages RouterApp Router渲染默认客户端渲染默认服务端渲染（RSC）数据获取getServerSideProps/getStaticProps直接在组件中async/await布局_app.tsx全局嵌套layout.tsx加载状态手动实现loading.tsx自动错误处理_error.tsxerror.tsx边界APIapi/目录route.ts二、Server Components vs Client Components这是App Router最重要的概念，也是最容易搞混的。2.1 Server Components（默认）// app/dashboard/page.tsx // 默认是Server Component，没有"use client"指令 import { db } from "@/lib/database" // 可以直接访问数据库！这个代码只在服务端运行 export default async function DashboardPage() { const users = await db.user.findMany() const stats = await db.analytics.getStats() return ( div h1仪表盘/h1 StatsCard data={stats} / UserList users={users} / /div ) }关键理解：Server Component的代码永远不会发送到浏览器。db.user.findMany()这样的代码可以安全地写在组件里，因为浏览器永远不会执行它。2.2 Client Components// app/components/SearchBox.tsx "use client" // 必须在文件顶部声明 import { useState, useEffect } from "react" export function SearchBox() { const [query, setQuery] = useState("") const [results, setResults] = useState([]) // 这些交互逻辑只能在Client Component中 useEffect(() = { if (query.length 2) { fetch(`/api/search?q=${query}`) .then(res = res.json()) .then(setResults) } }, [query]) return ( div input value={query} onChange={e = setQuery(e.target.value)} p
