我可以在 Next 13 应用程序上同时使用 /app 和 /pages 文件夹吗？

Question

完整的细节是，我\xe2\x80\x99m 正在开发一个使用 /app 文件夹作为其主路由容器的项目，但我们\xe2\x80\x99在本地主机上遇到了性能问题，因为在Next js 存储库上的问题。我想知道是否可以在 /pages 文件夹中构建项目的新部分（当然，不会发生路由冲突），甚至可以使用 typescript，因为现有项目是使用 JavaScript 构建的。

\n

Answer 1

根据 NextJs 文档，您可以使用 /app 和 /pages 文件夹。

但是，/app 是 /pages 文件夹的更新版本，/pages 文件夹是 Next JS 13 中的默认文件夹。在他们的文档中，他们描述了以下内容：

App Router 在名为 app 的新目录中工作。应用程序目录与页面目录一起工作，以允许增量采用。这允许您将应用程序的某些路由选择为新行为，同时将其他路由保留在以前行为的页面目录中。如果您的应用程序使用页面目录，另请参阅页面路由器文档。

它让我们了解到，目前支持 /pages 文件夹作为迁移到新的 /app 文件夹的一种方式。此外，他们还提到：

App Router 的优先级高于 Pages Router。跨目录的路由不应解析为相同的 URL 路径，并且会导致构建时错误以防止冲突。

我想说，从技术上讲，你可以同时使用两者，但我认为你不应该。

您可以访问此页面了解更多信息： 路由基础知识

Answer 2

是的，您可以在 Next.js 13 应用程序中使用 /app 和 /pages 文件夹。

/pages 文件夹是用于在 Next.js 应用程序中创建页面的默认文件夹。您可以在其中创建顶级页面，例如主页、关于页面等。

另一方面，/app 文件夹是 Next.js 11 中引入的新文件夹，允许您创建自定义 App 组件，它是包装应用程序中所有其他组件的顶级组件。您可以使用此文件夹自定义应用程序的布局和行为，例如添加全局 CSS 或 JavaScript、设置自定义路由等。

因此，如果您需要自定义应用程序的行为或布局，可以使用 /app 文件夹创建自定义应用程序组件。如果您需要创建页面，可以照常使用 /pages 文件夹。请务必注意，您可以在 /app 和 /pages 中创建子文件夹来组织组件和页面。