文章目录一、Pages Router1️. 基本概念2. 典型代码示例3. 优点4. 缺点二、App Router 新项目推荐使用1. 基本概念2. 典型代码示例Layout Page Metadata嵌套路由示例3. 优点4. 缺点三、主要区别对比四、选型建议Next.js 是 React的全栈框架自带路由系统。随着Next.js 13 / 15的发展官方推出了App Router与传统Pages Router共存。一、Pages Router1️. 基本概念目录pages/路由映射文件名对应 URL 路径pages/ index.js → / about.js → /about blog/[id].js → /blog/:id特点每个文件都是页面支持getStaticProps,getServerSideProps,getStaticPaths_app.js和_document.js管理全局布局和 HTML数据获取通过 page-level 函数完成2. 典型代码示例// pages/index.jsexportdefaultfunctionHome({posts}){return(divh1Welcome to My Blog/h1{posts.map((post)(div key{post.id}{post.title}/div))}/div);}// 数据获取exportasyncfunctiongetStaticProps(){constpostsawaitfetchPosts();return{props:{posts}};}3. 优点简单直观适合传统项目社区和示例多学习成本低支持 SSR、SSG 和 ISR4. 缺点布局复用复杂每页必须通过_app.js或 HOC 实现嵌套路由不方便没有原生 nested routing不支持 React Server ComponentsRSC不能像 App Router 那样在服务器直接渲染组件二、App Router 新项目推荐使用1. 基本概念目录app/路由映射文件夹对应 URLapp/ page.js → / about/page.js → /about blog/[id]/page.js → /blog/:id特点原生支持嵌套路由nested routing原生支持Server Components和Client Components使用layout.js实现全局和局部布局使用metadata配置全局 title、meta、Open Graph支持loading.js、error.js、template.js等页面状态2. 典型代码示例Layout Page Metadata// app/layout.jsexportconstmetadata{title:My Blog,description:Welcome to my blog,};exportdefaultfunctionRootLayout({children}){return(html langenbody{children}/body/html);}// app/page.jsexportdefaultfunctionHomePage(){returnh1Welcome to MyBlog(App Router)/h1;}嵌套路由示例app/ blog/ layout.js // blog 页面布局 [id]/ page.js // /blog/:id3. 优点嵌套路由和嵌套布局原生支持Server ComponentsClient Components优化性能页面级 metadata 管理更简单支持局部加载状态 (loading.js) 和错误边界 (error.js)更现代化的全局布局和字体管理4. 缺点学习成本较高需要理解 RSC社区和第三方库支持不如 Pages Router 广泛与旧项目迁移可能需要重构目录结构三、主要区别对比特性Pages RouterApp Router路由目录pages/app/文件到 URL 映射文件名 → 路径文件夹 page.js → 路径布局复用_app.js或 HOClayout.js 嵌套布局数据获取getStaticProps / getServerSidePropsServer Components fetch / asyncReact Server Components❌✅页面状态管理loading/error❌✅ loading.js / error.jsMetadata / SEOHead 组件手动管理metadata 自动生成学习曲线低高四、选型建议现在新项目只推荐使用 App Router。 感谢阅读想了解更多 我的博客网站 | 记录思考分享干货 我的个人主页 | 关于我、开源项目