对NextJS感到困惑,是否使用“app”-directory或“pages”和“index.tsx”或“page.tsx”

omqzjyyz  于 2023-06-05  发布在  其他
关注(0)|答案(1)|浏览(475)

NextJS让我很困惑。所有官方的例子和许多(大多数,所有?)我读过的教程包括官方文档都是用pages目录组织应用程序(如果需要的话,还有一个api目录用于后端服务)。他们声称pages目录下的每个文件都会自动反映相应的路由名称。
然而,当用npx create-next-app@latest创建一个新的NextJS应用程序时,我得到了一个完全不同的设置。它包含一个名为app而不是pages的文件夹。此外,app-文件夹包含一个文件page.txs作为同义词,它以前是pages-folder中的index.tsx
在这些教程和文档中,有一个概念,即通过放置文件pages/_app.tsx来覆盖系统-App-组件。我找不到任何东西如何做到这一点与新的董事会计划。
教程和文档:

- 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创建的scaffold出错了,还是我找不到另一个版本的文档?
如果新的scaffold是正确的版本,我如何在app-目录中放置新的路由和子页面?拥有api目录的概念仍然有效吗?
我希望有人能在这里为我解释一下NextJS的最新进展。谢谢你!

3duebb1j

3duebb1j1#

在Nextjs 13版本中,很多事情都发生了变化。这是一个有更多变化的版本,有一个巨大的Vercel conf解释了每一个变化,here。首先,默认情况下组件是服务器端的,因此现在划分前端和后端的层更薄。但在测试版中也有其他变化,如涡轮包编译您的应用程序。您还可以使用布局或错误来命名文件,以更轻松地处理设计,加载状态和错误。
关于app目录,你可以找到稳定的发布视频here。只要把文件放在那里,它们就会变成路由。您还可以创建文件夹,它们将成为访问页面的路径的一部分。我相信你也可以使用[]来实现动态路由,就像here解释的那样。以前的页面目录仍然可以工作,您可以将它与新范例沿着使用。新的文档非常好,我建议您从https://nextjs.org/docs开始。然后,也许可以看看this guy's videos,它很好地解释了这个主题。

相关问题