Next.js 13.5.1：app目录下dashboard文件夹内容不显示问题求助

以下是针对你遇到的问题的排查和解决步骤：

• 确认访问路径是否正确
  你需要访问 /dashboard 路径（比如 http://localhost:3000/dashboard）才能加载 app/dashboard/page.tsx 的内容。如果一直停留在根路径 /，只会显示 app/page.tsx 的内容，这是正常的路由逻辑。

• 检查文件命名与格式
  确保 dashboard 文件夹下的文件严格遵循App Router的命名规则：

  • 布局文件必须命名为 layout.tsx/layout.ts/layout.jsx/layout.js（注意大小写，Linux/macOS环境下区分大小写，不能写成 Layout.tsx）
  • 页面文件必须命名为 page.tsx/page.ts/page.jsx/page.js
    拼写错误或扩展名不符都会导致Next.js无法识别这些路由文件。

• 验证文件导出逻辑
  确认 dashboard 下的 layout 和 page 文件都导出了默认组件：
  示例 dashboard/page.tsx：

  export default function DashboardPage() {
    return <div>仪表盘内容</div>;
  }
  

  示例 dashboard/layout.tsx：

  export default function DashboardLayout({ children }: { children: React.ReactNode }) {
    return <section>{children}</section>;
  }
  

  没有导出默认组件的话，Next.js不会将其视为有效的路由页面/布局。

• 检查Next.js配置
  打开 next.config.js，确认没有禁用App Router的配置。如果存在 experimental.appRouter: false，需要将其改为 true 或者删除该配置项（Next.js 13.4及以上版本App Router默认启用）。

• 清除缓存并重启开发服务器
  开发环境的缓存可能导致文件未被正确识别，执行以下命令清除缓存并重启：

  npm run dev -- --clear-cache
  # 或使用yarn
  yarn dev --clear-cache
  

  重启后再访问 /dashboard 路径测试。

• 确认文件夹结构正确性
  确保你的文件结构是如下层级（dashboard直接在app目录下）：

  app/
    layout.tsx
    page.tsx
    dashboard/
      layout.tsx
      page.tsx
  

  如果dashboard嵌套在其他子文件夹中，路由路径也需要对应调整（比如 app/xxx/dashboard 对应 /xxx/dashboard）。

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