Next.js 路由不起作用 - 页面未正确加载

Question

我的 Next.js 应用程序中的路由遇到问题。我已经在“pages”目录中设置了一个名为 的页面about.tsx，但是当我尝试使用其各自的 URL ( ) 访问它时localhost:3000/about，页面无法正确加载并发送：

此页面找不到 404 错误。

我已经仔细检查了我的代码和目录结构，一切似乎都按顺序进行。是什么原因导致此问题？如何解决？

任何人都可以帮我解决这个问题吗？

Answer 1

app并且pages文件夹在 Next.js 中具有特殊含义。不要像您那样将两者嵌套在一起。您在创建项目时选择您想要的最后一个问题：

该app文件夹显示page.tsx您已选择Yes上图中的最后一个问题。因此，要拥有一条/about路由，您需要创建一个名为aboutin的文件夹，其中app包含 a page.tsx，通向app/about/page.js.

如果您正在遵循教程并想要使用路由器pages，最简单的方法是创建一个新项目并相应地回答终端：

npx create-next-app@latest