第六章：Next.js 进阶

Next.js App Router

概述

Next.js App Router 是 Next.js 13 引入的全新路由系统，基于 React Server Components 构建，提供了更灵活的路由结构和更高效的渲染方式。它取代了传统的 pages 目录结构，采用基于文件系统的 app 目录路由。

核心特性

1. 嵌套路由

   • 通过文件夹结构自动生成嵌套路由
   • 支持布局共享和局部更新
   • 示例：

     app/
       dashboard/
         layout.tsx  # 共享布局
         page.tsx    # 路由内容
         settings/
           page.tsx
     

2. React Server Components

   • 默认使用服务端组件
   • 自动代码分割和流式传输
   • 客户端组件需显式声明：

     'use client'
     

3. 增强的数据获取

   • 支持 async/await 组件
   • 内置数据缓存机制
   • 示例：

     export default async function Page() {
       const data = await fetchData()
       return <div>{data}</div>
     }
     

路由约定

迁移指南

1. 从 Pages Router 迁移

   • 逐步迁移策略：可以同时保留 pages 和 app 目录
   • 主要变化点：
     • getStaticProps/getServerSideProps → 直接使用 async 组件
     • _app.js → app/layout.js
     • _document.js → 通过 layout.js 配置

2. 常见模式转换

   // Pages Router
   export async function getStaticProps() {...}
   
   // App Router
   export default async function Page() {
     const data = await getData()
     return <Component data={data} />
   }
   

最佳实践

1. 组织项目结构

   app/
     (auth)/
       login/
         page.tsx
     (marketing)/
       about/
         page.tsx
     dashboard/
       layout.tsx
       page.tsx
   

2. 性能优化

   • 使用 React.cache() 进行请求去重
   • 合理使用 loading.js 和 error.js
   • 动态导入客户端组件：

     import dynamic from 'next/dynamic'
     const ClientComponent = dynamic(() => import('./ClientComponent'))
     

3. 渐进式采用

   • 新功能优先使用 App Router
   • 复杂页面可暂时保留在 pages 目录
   • 利用 middleware.js 处理跨路由逻辑

注意事项

1. 当前限制

   • 部分第三方库可能需要适配
   • 客户端组件中的状态管理需要额外注意
   • 文档资源仍在快速更新中

2. 学习资源

   • 官方迁移指南：https://nextjs.org/docs/app
   • App Router 示例库：https://github.com/vercel/app-playground
   • 社区讨论：https://github.com/vercel/next.js/discussions

App Router 代表了 Next.js 的未来发展方向，虽然学习曲线存在，但带来的架构改进和性能提升值得投入学习。