Best Practices: NextJS 13-Ordnerstruktur

Question

Ich lerne, NextJS zu verwenden und verwende die neueste Version von App Router. Ich bin derzeit nicht sicher, wie ich das Routing durchführen soll, z. B. wo die Registrierungs- und Anmeldeseiten abgelegt werden sollen und ihre Ordnerstruktur im Allgemeinen, wo ich die Komponenten platziere und wie ich sie ablege zusammen mit anderen verwandten Komponenten, könnten Sie etwas Licht in dieses Thema bringen und es bitte so einfach wie möglich machen, vielleicht einige Beispiele nennen, da ich noch lerne, jede Hilfe wäre sehr dankbar, danke!

Answer 1

我认为阅读下一篇文档中的这一部分可以帮助您组织项目文件夹：

https://nextjs.org/docs/app/building-您的应用程序/路由/托管

我尝试了许多不同的结构，最后选择了这个：

1. 所有内容（所有文件夹和文件）都将位于 /app 目录中，因为 /app 目录接受共置，并且它与仅用于路由目的的 /pages 目录不同。这样 /app 目录就可以被假定为新的 /src 目录。

2. 所有非路由文件夹都将成为私有文件夹，方法是在其名称前添加下划线（如上面的链接所述）。这告诉下一个路由器该文件夹不是路由的一部分。 （例如_components、_libs、...）

3. 至此，我们确定每个带下划线 (_) 的文件夹都不是路由，而其他不带下划线的文件夹是路由系统的一部分（尽管文件夹中包含 page.tsx 或 page.js 文件是路由系统的一部分）成为路由系统一部分的另一个条件），但我使用了另一个 Next 13 功能，它是路由组（如上面的链接所述）。它将文件夹名称括在括号中，以便显示该文件夹用于组织目的（分组文件夹），并且不应包含在路由的 URL 路径中，例如（路线）。

根据这些原则，我将所有必需的文件夹放在 /app 目录中，并且使用路由组将我的所有路由分组到“(routes)”文件夹中，使用私有文件夹通过在非路由文件夹前添加下划线前缀，所有内容是孤立的。

下图是上述所有要点的总结。

希望该链接和我组织项目文件夹的方式对您有所帮助。