Next.js 12迁移至最新版本：Pages转App路由的简化方法咨询

不用一次性全量迁移，Next.js 完全支持 Pages 路由和 App 路由共存，你可以采用渐进式迁移的方式，逐步把页面从旧路由体系转到新体系，降低学习和迁移成本，具体步骤如下：

• 先完成版本升级
  先执行命令升级到最新版：

  npm install next@latest react@latest react-dom@latest eslint-config-next@latest
  

  升级后先启动项目，确认原有 Pages 路由的页面能正常运行——新版本对 Pages 路由的兼容性很好，不需要一开始就改代码。

• 渐进式迁移页面
  从非核心页面（比如关于页、帮助页）开始试手，把它们从pages/目录迁移到app/目录：

  • 路由结构对应规则：pages/about.js 需要改成 app/about/page.js（App 路由要求页面文件必须命名为page.js）
  • 页面组件直接用默认导出的 React 组件，不需要getServerSideProps/getStaticProps这类方法，在 Server Component（默认就是）里直接用async/await写数据逻辑即可
  • 核心页面（比如首页、用户中心）可以暂时保留在 Pages 路由，等你熟悉 App 路由的逻辑后再迁移，两者不会冲突——Next.js 会优先匹配 App 路由的页面，找不到才会用 Pages 路由的。

• 适配数据获取逻辑
  Pages 路由的数据获取方法在 App 路由里有替代方案：

  • 静态数据：直接在组件里用fetch，默认就是缓存模式，相当于原有的getStaticProps
  • 动态实时数据：给fetch加上cache: 'no-store'配置，或者用revalidate: 60设置自动重新验证时间，替代getServerSideProps
  • 客户端数据获取还是和之前一样，用useSWR、react-query或者原生useEffect都可以。

• 迁移全局布局
  App 路由用app/layout.js作为全局布局，替代原来的_app.js和_document.js：

  • 把原_app.js里的全局样式、导航栏、全局状态逻辑移到这个布局组件里
  • 如果需要给特定页面组设置独立布局，比如博客页面，可以在app/blog/目录下新建layout.js，这个布局只会作用于博客相关页面

• 边迁移边测试
  每次迁移完一个页面，都要测试页面功能、路由跳转、数据渲染是否正常；定期执行next build和next start验证生产构建是否能正常完成，避免最后出现批量问题。

内容的提问来源于stack exchange，提问作者grade