Next.js 13 App Router创建动态顶级页面遇404错误求助

你的核心错误是没有按照Next.js 13 App Router的动态路由目录规则创建文件。

正确的动态路由结构 #

App Router要求每个路由对应一个文件夹，动态路由参数需要作为文件夹名（用方括号包裹），然后在该文件夹内创建page.tsx作为页面入口。正确的目录结构应该是：

app/
└── [slug]/
    └── page.tsx

修改后的代码 #

将你原来的代码移动到app/[slug]/page.tsx中，核心逻辑可以保留，也可以简化（Next.js 13的Page组件无需使用FC类型）：

interface PageProps {
  params: { slug: string }
}

export default function Page({ params }: PageProps) {
  return <h1>{params.slug}</h1>
}

额外排查点 #

如果调整结构后仍出现404，可以检查：

• 重启Next.js开发服务器，确保路由配置更新生效
• 确认项目中没有middleware.ts设置了拦截该路由的重定向规则
• 验证你的Next.js版本是13.0及以上，且未在next.config.js中禁用App Router

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