Next.js 13中Pages文件夹无法沿用旧版使用方式的解决方案咨询

Next.js 13默认启用了新的App Router，但你完全可以继续沿用熟悉的Pages Router模式，无需强制切换到文件夹式页面结构。

一、核心配置说明 #

• 无需额外配置，只要项目根目录下存在pages文件夹，Next.js会自动识别并启用Pages Router，路由逻辑和旧版本完全一致。
• 注意：如果不是渐进式迁移，建议不要同时保留app和pages文件夹，避免路由冲突。

二、沿用旧版目录结构示例 #

完全和你之前的习惯一致：

• 根目录下创建pages文件夹作为路由核心目录
• 直接在pages下创建页面文件：比如pages/about.js对应路由/about
• 通过子文件夹组织嵌套路由：比如pages/blog/post.js对应路由/blog/post
• 动态路由使用方括号命名：比如pages/blog/[id].js匹配/blog/123这类动态路径
• 404页面放在pages/404.js，全局生效
• API路由依然放在pages/api目录下：比如pages/api/user.js对应接口/api/user

三、路由不生效的排查要点 #

• 确认Next.js版本为13.x，Pages Router在该版本中完全兼容
• 检查是否误创建了app文件夹，若不需要App Router可直接删除
• 确保页面文件采用默认导出组件：export default function PageName() { ... }
• 开发环境下重启Next.js服务，避免缓存导致的路由未更新

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