对 NextJS 感到困惑，是否使用“app”目录或“pages”以及“index.tsx”或“page.tsx”

Question

NextJS 让我感到困惑。我读过的所有官方示例和许多（大多数，全部？）教程（包括官方文档）都使用 - 目录pages（以及，如果需要，用于api后端服务的 - 目录）组织应用程序。他们声称pages目录下的每个文件都会自动反映相应的路由名称。

然而，当使用创建新的 NextJS 应用程序时npx create-next-app@latest，我得到了完全不同的设置。它包含一个名为appand not的文件夹pages。此外，app-folder 包含一个文件作为以前在pages-folder 中page.txs的同义词。index.tsx

在这些教程和文档中，存在App通过放置文件来覆盖系统组件的概念pages/_app.tsx。我找不到任何如何使用新目录方案执行此操作的信息。

教程和文档：

- package.json
- next.config.js
+ pages
  - _app.tsx
  - _document.tsx
  - about.tsx
  - index.tsx
+ public
  - favicon.ico

新脚手架：

+ app
  - favicon.ico
  - globals.css
  - layout.tsx
  - page.tsx
- next.config.hs
- package.json

发生什么事了NextJS？什么是对的？将创建的脚手架是否错误npx create-next-app@latest，或者是否有我找不到的其他版本的文档？

如果新的脚手架是正确的版本，我如何在app目录中放置新的路由和子页面？拥有 - 目录的概念api仍然有效吗？

我希望有人可以在这里为我解释一下 NextJS 的最新发展。谢谢你！

Answer 1

在 Nextjs 13 版本中，很多事情都发生了变化。这是具有更多更改的版本，这里有一个巨大的 Vercel conf 解释了每一项更改。首先，组件默认是服务器端的，因此前后端的划分层现在更薄了。但测试版中还存在其他变化，例如用于编译应用程序的涡轮包。您还可以使用布局或错误来命名文件，以更轻松地处理设计、加载状态和错误。

关于应用程序目录，您可以在这里找到稳定版本视频。只需将文件放在那里，它们就会成为路由。您还可以创建文件夹，它们将成为访问页面路径的一部分。我相信您还可以使用 [] 进行动态路由，如此处所述。以前的页面目录仍然有效，您可以将其与新范例一起使用。新文档非常好，我建议您从https://nextjs.org/docs开始。然后，也许可以看看这个人的视频，它很好地解释了这个主题。