续：开源项目学习之 Next.js 企业级启动模版
大家好，我是一百个Chocolate。
上一期内容我们介绍了 next-enterprise 这个开源项目，里面还是有我们可以 pick 一下的内容，选择性的集成到自己的项目中，提升开发体验。
这次我们来看一下这个项目当中的 Issues 部分，如下：
我发现这里面还是有一些深度讨论的，大家和作者交流为什么要选择这个而不使用那个等等，我们一起来看一看。
先来到第一个问题：为什么不使用 Husky？
作者回复比较简单，就觉得相对与 git hooks 慢一点，不过我看国内社区许多配置开发环境都会用这个，这也看个人习惯，总归还是有人用的。
我也看了 antfu 的 VueUse 项目里，是没有配置 Husky 的，而是使用的 simple-git-hooks：
接着，来看下一个问题，是一位开发者建议能使用 Monorepo，也就是大仓，毕竟大仓启动模版要更复杂一点，从零开始配的话还是会花费比较多时间的，而 Monorepo 目前使用也挺多的，上面提到的 VueUse 以及 Vue3 等等，社区里面其实使用挺多的，企业级内部不管是国内还是国外都挺常见的。
作者也提到了会有计划使用 Turborepo 来配置，不过觉得不是所有的项目都需要大仓，而且大仓复杂度相对高一点，也就需要有架构师这样的角色在这个项目里面。
下面选取了作者的回复内容：
如果我们决定向它添加一个后端服务器，Monorepo 会很有意义，然后我们可以为共享类型 / 接口等创建一个包。但对于大多数项目，我认为，只有一个应用程序的 monorepo 会更累人，而不是有帮助。在技术方面，我更喜欢采取更简单的路线，但我真的很乐意接受有关这方面的建议，因为我花了很多时间思考是否包括这一点。
不过后续又有一个老哥也支持了 Monorepo 的观点，觉得会更好的拆分代码，并且一个产品随着增长往往都会变得更加复杂，所以为什么不从一开始就考虑好呢？而不是做着做着发现这样不够优雅、那样不好复用。
不过我个人觉得其实真正放在企业里来看，不管开始考虑的多么完美，技术债总能在未来的某一天发生。不过技术也只是工具，还是得结合具体业务来看，就像作者所说，做一个全栈应用还是挺有意义的。
我们接着往下看看，有人问到了 App Dir 以及 Tailwind CSS 生态方面的问题。
也就是为什么不使用新版的 App Router，关于 ui 的选择，为什么没有选择像 Chakra 这样的 UI 库？因为 tailwindcss 给人感觉写起来太过拥挤了。
这确实是一个好的问题，我也会这样想，其实除了 Chakra UI 库，还有一个目前也比较火热：shadcn。
主页长这样：
配合 Next.js 开发体验也不错的，完全可定制化，我也打算在今后个人项目中去使用。虽然社区里有非常多优秀的组件库，你导入一下就可以使用，但是咱们设计师都有自己的风格，往往还是需要去做一层封装，
我们结合作者的观点来看看，首先是对于新版的 app 目录，他觉得也是比较推荐的，虽然项目中使用的是 pages router，但是示例代码非常简单，因此你完全可以很丝滑地去使用 App Router。
当时我看到就想确实没毛病，这个交由开发者自己来做选择，只是我没有提供示例而已，并不代表我不喜欢 App Router。
而对于 ui 库选择问题，作者很早就使用了 Chakra UI 库，不过打包体积问题以及性能没那么好于是选择了放弃。
而在该仓库中选择了 Radix UI，主页是这样的：
正如官网标题介绍：为什么要浪费时间去重塑 UI 组件呢？
我们在上文提及的 shadcn/ui，官网页面是有迭代更新的，GitHub README 这里还是之前的界面：
可以看到，shadcn 也基于了 Radix UI。
上文也提到了需要配置化的问题，平常我们安装组件库，他们通过 npm install 安装之后源码会在 node_modules 里面，而 shadcn 是可以直接将源代码添加到我们开发目录 components 下，那么我们完全就可以基于源码来修改，而不是套一层。
当然，实力足够强的开发根本不需要组件库，参考一下 shadcn 方式自己基于 tailwindcss 就能打造属于自己风格的 UI 了。
最后，来看看 tailwindcss 写法太过拥挤的问题，先给大家看下例子，这是我以前用 Next.js 写的一个 button 组件，来看看：
这还是我使用了 clsx 以及结合了业界都非常推荐使用的 tailwind merge 的呈现，如果只写在一行的话那确实太难看了，从头拉到尾。
不过现在比较常见的写法是可以配合 cva.style 来做到业务逻辑和样式进行分离，上文提到 shadcn 可以将源码放到 components 下嘛，也就是提供了手动方式，来看看他们的 button 示例代码：
可以看到定义了一个 buttonVariants 变量，而在我们 Button 组件中，我们可以简便地赋值给 className 了，如下：
那么这就看个人使用习惯了，如果是要做 ui 组件库之类的，那么采用 cva.style 是一个不错的选择，但日常写写页面，我觉得 clsx 以及 tailwincss merge 也够用了。
以上就是本次分享的全部内容了，算是上一期的后续了，最近一直在看 RSC 相关的内容，后续会分享关于此块的系列内容，感谢您的阅读，have a good day!
#前端# #Next.js#
