NextJS 13 App Router开发模式下全页面404错误求助

1. 核对页面文件命名规范 #

App Router强制要求路由页面文件必须命名为page.tsx（或.js/.jsx/.ts）：

• 首页必须放在app/page.tsx，不能用旧的index.tsx
• 动态路由页面需放在对应参数目录下，比如app/post/[id]/page.tsx
• 确认没有误命名或遗漏page.tsx文件

2. 排查动态路由与generateStaticParams的冲突（开发模式） #

开发模式下不需要generateStaticParams，如果之前为静态导出添加了该函数：

• 检查动态路由页面中generateStaticParams的返回值是否匹配路由参数格式
• 若暂时不需要静态导出，可注释该函数后重启服务测试

3. 检查next.config.js配置 #

• 若设置了basePath，确认访问路径是否包含对应前缀；未使用则删除该配置
• 若启用了output: 'export'，开发模式下必须注释该配置，静态导出模式会干扰开发环境的路由解析
• 示例正确配置（开发模式）：

  /** @type {import('next').NextConfig} */
  const nextConfig = {
    // output: 'export', // 开发时注释
    // basePath: '/custom-path', // 未使用则删除
  }
  module.exports = nextConfig
  

4. 清理缓存并重启服务 #

• 删除.next缓存目录：
  • Linux/macOS：rm -rf .next
  • Windows：rmdir /s .next
• 重新启动开发服务：npm run dev或yarn dev

5. 确认目录结构正确性 #

确保路由层级与文件结构匹配，示例正确结构：

app/
  layout.tsx
  page.tsx          # 首页
  products/
    [productId]/
      page.tsx      # 动态路由 /products/[productId]

• 避免嵌套layout错误覆盖路由逻辑
• 检查是否存在拼写错误的路由目录名

6. 路由组使用检查（若涉及） #

路由组（如(auth)/page.tsx）不影响路由路径，但需确保组内的page.tsx文件存在且路径正确，不要混淆路由组与普通路由目录。

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