NextJS 13文件夹结构最佳实践

2ic8powd  于 2023-05-17  发布在  其他
关注(0)|答案(2)|浏览(376)

我正在学习使用NextJS,我正在使用应用路由器的最新版本,我目前停留在如何进行路由,例如在哪里放置注册和登录页面,以及它的文件夹结构一般,我把组件放在哪里以及如何将其他相关组件组合在一起,你能阐明这个主题吗,请尽可能简单,也许给予一些例子,因为我还在学习,任何帮助将不胜感激,谢谢!

yzckvree

yzckvree1#

有些人把components放在应用程序里面,但我把它们放在外面,告诉其他工程师app目录只包含页面组件。如果你有类似的路由,你可以在app目录中使用()语法。举个例子

auth文件夹中,您可以使用共享布局的loginsignup页面。
在components文件夹中,您可以为providersuishared组件创建子文件夹。

xghobddn

xghobddn2#

您可以在最新的应用程序路由器版本中使用各种路由,甚至可以自定义路由以使用您自己的自定义路由。
Next.js应用路由器的默认路由:创建页面时,可以直接在文件夹内创建一个带有页面名称的文件夹,例如about page,create about folder,create page.jsx(在about folder内,作为about的索引页即可以通过URL/about)App /about page.jsx访问
2.)实施自定义工艺路线
你可以在next-config中添加

async rewrites() {
    return [
      {
        source: '/old-route',
        destination: '/new-route',
      },
      // Add more custom routes as needed
    ];

我也研究过目录结构,当我开始For Best Practices时,我直接在App中创建页面directory.like all/products/page.jsx或app/about/page.jsx
对于管理员UI,我使用app/admin/pagenameofadmin/page.jsx app/admin/page.tsx(管理员主页)
对于所有其他组件,请使用组件文件夹,并在组件中创建子文件夹以轻松查找组件
布局-用于常见和重复组件,如页眉/页脚/侧边栏auth -用于登录注册相关组件admin -用于管理UI组件pagename -用于页面特定组件
也可以为特定的内容类型创建文件夹,如果你想保持一切组织在下一个层次,我建议使用它为复杂的项目只产品-为产品realted组件
将api保存在app/utils文件夹中。

相关问题