Next.js 13.4.2：/app与/pages目录页面导航触发全量重载求助

你的猜测完全正确：Next.js的app目录（App Router）和pages目录（Pages Router）是两套独立运行的路由系统，跨系统跳转时默认会触发全页重载，因为它们的客户端路由逻辑不互通。

以下是可行的解决办法：

1. 统一路由系统（最彻底方案） #

• 将pages目录下的页面迁移到app目录，比如把/pages/test-page.tsx重构为/app/test-page/page.tsx。所有页面统一使用App Router后，跳转将完全基于客户端导航，不会触发全量重载。
• 若原Pages Router页面依赖getServerSideProps、getStaticProps这类旧数据获取方法，可替换为App Router的对应方案：比如在Server Components中直接编写异步逻辑，或使用generateStaticParams、fetch的缓存配置来实现数据预取。

2. 临时优化体验（不迁移的情况下） #

• 如果暂时无法完成路由统一，可添加页面过渡动画来弱化全页重载的感知，但本质上仍会触发刷新，只是体验有所提升。
• 注意：next/link组件在App Router环境下仅能处理app目录内的路由，跨到pages目录时会自动降级为普通<a>标签，因此使用Link或普通a标签的效果一致，无法实现无刷新跳转。

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