Next.js项目localhost:3000访问出现404，路由问题求助

1. 匹配Next.js路由体系的文件要求 #

Next.js有两种路由模式，对应不同的文件结构要求：

• App Router（Next.js 13及以上）：根路由/需要在app目录下存在page.js/page.tsx文件，这是访问localhost:3000的入口页面。
• Pages Router：根路由需要在pages目录下存在index.js/index.tsx文件。

2. 检查你的项目结构 #

从你提供的截图来看，项目根目录包含app文件夹，但缺少根路由对应的page.js/page.tsx文件。你需要：

• 进入app目录，创建基础的页面文件，示例代码：

export default function Home() {
  return <h1>Hello, Next.js!</h1>
}

3. 重启开发服务 #

修改文件后，停止当前运行的npm run dev或yarn dev命令，重新启动开发服务器，让Next.js加载新的路由文件。

4. 排查自定义路由冲突 #

如果你的next.config.js中配置了路由重写、重定向规则，检查是否误将根路由指向了不存在的路径。可以暂时注释掉自定义路由配置，测试页面是否恢复正常。

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