最佳实践:NextJS 13 文件夹结构
P粉131455722
P粉131455722 2023-10-22 10:36:38
0
1
780

我正在学习使用 NextJS,并且正在使用 App Router 的最新版本,我目前陷入如何进行路由的困境,例如将注册和登录页面及其文件夹结构放在哪里一般来说,我在哪里放置组件以及如何将其他相关组件组合在一起,您能否阐明这个主题,并请使其尽可能简单,也许可以举一些例子,因为我仍在学习,任何帮助将不胜感激,谢谢!

P粉131455722
P粉131455722

全部回复(1)
P粉786800174

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

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)”文件夹中,使用私有文件夹通过在非路由文件夹前添加下划线前缀,所有内容是孤立的。

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

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

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板