Next.js部署Cloudflare后动态路由404且无API请求问题

1. 确认Cloudflare Pages的Next.js适配配置 #

• 检查Cloudflare Pages项目的「设置」→「构建与部署」→「框架预设」是否选为Next.js，而非通用静态站点。若选通用静态，Cloudflare不会处理Next.js动态路由规则，直接返回404。
• 确保构建命令和输出目录正确：Pages Router默认构建命令为npm run build，输出目录为.next；自定义配置需和next.config.js设置匹配。

2. 检查动态路由文件夹结构 #

• 确认路由结构符合Pages Router规范：
  • 正确结构为pages/verify/token/[username].js（单文件路由），或pages/verify/token/[username]/index.js（文件夹路由）。
  • 避免拼写错误，Next.js仅识别方括号[]包裹的动态参数格式。

3. 排查Cloudflare Pages路由规则 #

• 进入Cloudflare控制台对应项目的「设置」→「路由」，查看是否有自定义规则覆盖动态路由匹配。比如强制跳转、重写规则可能拦截动态路由导致404，必要时暂时禁用自定义路由测试。

4. 验证Next.js构建产物 #

• 本地执行npm run build后，查看.next/server/pages/verify/token目录下是否生成[username].js或[username]/index.js服务端渲染文件。若未生成，说明构建时路由未被正确识别，需检查代码语法或路由定义问题。
• 若使用getServerSideProps，确保函数导出正确，无语法错误导致构建失败（生产构建比开发环境更严格）。

5. 检查Next.js的basePath配置 #

• 如果next.config.js中设置了basePath（如basePath: '/app'），实际访问路径应为somehost/app/verify/token/my_username/，确认访问路径与basePath匹配。

6. 清除Cloudflare Pages缓存 #

• 手动触发Cloudflare Pages项目重新部署，勾选「清除缓存」选项，确保最新构建产物和路由规则生效。

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