Next.js执行next dev -p 3001出现404页面未找到错误求助

以下是针对你遇到问题的具体排查方向：

1. 检查页面路由文件的位置与存在性 #

Next.js Pages Router依赖pages目录下的文件生成路由：

• 根路由（/）需要存在pages/index.tsx文件，若缺失会直接返回404。
• 确认你访问的路径对应pages目录下的文件是否存在，比如访问/about需要pages/about.tsx，动态路由需遵循[param].tsx命名规则。
• 根据你的文件结构，重点确认pages目录的层级和文件是否符合路由规则。

2. 排查路由拦截与配置问题 #

• 若项目中有middleware.ts，检查其中的逻辑是否错误拦截了正常请求，比如匹配规则过宽导致合法路由被重定向或阻止。
• 查看next.config.js中的redirects、rewrites配置，确认没有将请求指向不存在的路径。

3. 定位statusCode:400的来源 #

pageProps中的statusCode:400通常是数据获取逻辑抛出的错误：

• 检查页面组件中的getServerSideProps/getStaticProps函数，看是否有接口请求返回400错误，或代码中主动返回了包含statusCode:400的对象。
• 若有API路由（pages/api下的文件），排查这些接口是否存在参数错误、逻辑异常导致返回400状态，进而影响页面渲染。

4. 清除缓存与验证访问路径 #

• 停止开发服务器，删除.next缓存目录后重新执行next dev -p 3001，避免缓存导致的路由异常。
• 确认访问的路径为http://localhost:3001（或对应页面的正确路径），避免输入错误的URL。

快速测试方法 #

创建一个极简测试页面pages/test.tsx：

export default function TestPage() {
  return <div>Test Page</div>
}

访问http://localhost:3001/test，若能正常加载，说明问题出在特定页面或全局配置；若仍返回404，需检查项目基础配置（如pages目录是否正确、Next.js版本兼容性）。

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