Nextjs13 开发服务器无法运行，给出 404

Question

今天早上早些时候，这种情况发生在我身上一次，我认为这与部署到 AWS Amplify 有关，因为它无法构建，但后来我意识到我的开发服务器也随机停止工作。

我修复它的方法是完全删除该项目并重新开始并逐段重新添加代码并确保其有效。它成功了，我以为这可能只是随机损坏的东西或其他什么东西，但在编写代码几个小时后，它又发生了。我重新启动了开发服务器，以反映我通过向顺风配置添加颜色所做的更改，当我重新启动时，我再次收到 404。我试图推动我所拥有的东西，但 AWS Amplify 也未能构建。

当我运行时npm run dev，终端中的开发服务器正常启动，如下所示：

npm run dev

> kruegerandco@0.1.0 dev
> next dev

- ready started server on 0.0.0.0:3000, url: http://localhost:3000
- event compiled client and server successfully in 352 ms (20 modules)
- wait compiling...
- event compiled client and server successfully in 167 ms (20 modules)

我在浏览器中打开它，然后得到通用的 Nextjs 404 页面。

在控制台中我得到： GET http://localhost:3000/ 404 (Not Found)错误，没有其他任何信息。

在 AWS Amplify 构建日志中，我收到以下错误：

2023-07-09T18:15:20.238Z [WARNING]: > Build error occurred
2023-07-09T18:15:20.239Z [WARNING]: [Error: ENOENT: no such file or directory, lstat '/codebuild/output/src127452464/src/kruegerandco/.next/server/app'] {
                                    errno: -2,
                                    code: 'ENOENT',
                                    syscall: 'lstat',
                                    path: '/codebuild/output/src127452464/src/kruegerandco/.next/server/app'
                                    }
2023-07-09T18:15:20.270Z [ERROR]: !!! Build failed

我的文件夹结构中没有 .next/server/app ，app 文件夹位于我的 src 目录中，并且默认放置在那里。

如果有人可以帮助我解决这个问题，这样它就不会随机发生在我身上，那就太好了。顺便说一句，这是我使用应用程序路由器的第一个项目，所以也许有一些与之相关的东西，但我真的不知道。

编辑：我不确定这是否相关，但控制台中的错误发生在on-demand-entries-client.js:49 GET http://localhost:3000/ 404 (Not Found)

Answer 1

我刚刚安装后遇到了同样的问题shadcn/ui。这个特定的库将自身绑定到globals.css样式表。

在安装过程中，系统会提示您指定文件的位置。

shadcn ui 安装提示截图

该路径实际上并不是我的globals文件所在的位置。我正在使用该src文件夹，这意味着路径实际上是src/app/globals.css. 在我把头撞到墙上后，我注意到，在找不到文件后，脚本app在项目的根目录中创建了一个文件夹。

我重新安装/重新初始化了库，现在指向正确的文件夹，并且错误消失了。我认为发生错误是因为 Nextapp在根目录中找到了该文件夹并尝试从那里运行应用程序。

我的建议是检查您的文件夹结构，看看“下一步”是否没有拾取其他内容。如果您没有找到任何东西，请尝试创建一个中间件功能（如果您没有）。在该函数中，将一些内容打印到控制台。如果您尝试访问路线但在控制台上没有得到任何结果，则意味着该请求甚至没有进入您的应用程序。

在您的文件夹中创建一个middleware.ts文件app（假设您使用的是 TypeScript 和应用程序路由器）并添加以下代码：

import { NextResponse } from "next/server";
import type { NextRequest } from "next/server";

export function middleware(request: NextRequest) {
  console.log("request", request);
  return NextResponse.next();
}

当您尝试访问应用程序中的任何内容（例如，localhost:3000）时，此函数应在开发控制台（而不是浏览器控制台）上运行并打印请求。

如果您无法通过查看文件来解决问题，上面的功能至少会提示您问题出在哪里。

祝你好运！