App Router

掌握Next.js 15 App Router的核心概念，构建高性能的全栈应用。

前言 Next.js 15 带来了许多令人兴奋的新特性，特别是 App Router 的成熟和稳定。相比传统的 Pages Router，App Router 提供了更强大的路由控制、更好的性能优化和更直观的文件组织方式。 本文将带您从零开始，使用 Next.js 15 App Router 构建一个完整的现代化 Web 应用，深入探讨每个核心概念和实战技巧。 一、App Router 核心概念 1.1 App Router vs Pages Router 特性 Pages Router (传统) App Router (新) 文件位置 pages/ 目录 app/ 目录 路由方式 文件系统路由 文件系统路由 数据获取 getServerSideProps 服务器组件 + fetch 布局 需要 _app.js 内置 Layout 系统 加载状态 手动实现 自动 loading.js 错误处理 _error.js error.js 流式渲染 不支持 支持 服务器组件 不支持 原生支持 1.2 文件组织结构 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 my-app/ ├── app/ │ ├── (marketing)/ # 路由组 - 不影响URL │ │ ├── about/ │ │ │ └── page.js # /about │ │ ├── layout.js # 共享布局 │ │ └── page.js # / (首页) │ ├── (dashboard)/ # 路由组 │ │ ├── dashboard/ │ │ │ ├── layout.js # Dashboard布局 │ │ │ ├── page.js # /dashboard │ │ │ └── settings/ │ │ │ └── page.js # /dashboard/settings │ │ └── layout.js # 认证布局 │ ├── api/ # API路由 │ │ └── users/ │ │ └── route.js # /api/users │ ├── layout.js # 根布局 │ ├── page.js # 根页面 │ ├── loading.js # 全局加载状态 │ ├── error.js # 全局错误处理 │ ├── not-found.js # 404页面 │ └── globals.css # 全局样式 ├── public/ # 静态资源 ├── components/ # 共享组件 ├── lib/ # 工具函数 └── next.config.js # Next.js配置 二、路由系统实战 2.1 动态路由 基础动态路由 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 // app/blog/[slug]/page.tsx interface BlogPostProps { params: { slug: string } } export default async function BlogPost({ params }: BlogPostProps) { const { slug } = params // 在服务器端获取数据 const post = await fetch(`https://api.example.com/posts/${slug}`) .then(res => res.json()) return ( <article> <h1>{post.title}</h1> <p>{post.content}</p> </article> ) } 捕获所有路由 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 // app/docs/[...slug]/page.tsx // 匹配 /docs/a, /docs/a/b, /docs/a/b/c 等 export default async function DocPage({ params }: { params: { slug: string[] } }) { const path = params.slug.join('/') const content = await fetch(`https://api.example.com/docs/${path}`) .then(res => res.json()) return ( <div> <h1>文档: {path}</h1> <div>{content.body}</div> </div> ) } 2.2 路由组（Route Groups） 路由组允许您组织文件结构而不影响 URL 路径： ...