首页 > web前端 > js教程 > 从 Monolith 到 Monorepo:Next.js 迁移故事

从 Monolith 到 Monorepo:Next.js 迁移故事

Linda Hamilton
发布: 2024-11-04 07:23:02
原创
724 人浏览过

From Monolith to Monorepo: A Next.js Migration Story

VS Code 中的白色光标无声闪烁,但没有出现类型提示。我同事沮丧的叹息声在我们的 Slack 通话中回响——他的旧机器最终完全放弃了 TypeScript 建议。经过一年的构建 Next.js 应用程序,我们遇到了我一直担心的一堵墙:我们的整体代码库变得太大了,不舒服。

整体的开始

当我第一次开始这个项目时,Next.js 似乎是完美的选择。来自使用 React Router 和 Express 的普通 React SPA 背景,甚至更早的 PHP 经验,将服务器和客户端代码放在一起的想法感觉很直观。按照传统观点,我们根据功能而不是技术问题来组织代码。身份验证、潜在客户、帐户、团队功能 - 每个功能都位于自己的模块中,并具有自己的类型、实用程序、常量和服务器端代码。

“一开始很漂亮,”我记得在最初的几个月里我这样想。使用帐户模块意味着您需要的一切都在那里 - 组件、挂钩、tRPC 函数,甚至 Prisma 文件 - 全部都在一个文件夹中。这是我一直想要的开发者体验。

裂缝开始显现

七个月后,第一个警告信号出现了。 TypeScript 的语言服务器开始陷入困境,建议出现的速度越来越慢,构建时间也在缓慢上升。虽然我强大的开发机器仍然可以处理它,但我同事的旧硬件完全屈服于复杂性。

我们面临着一个典型的工程十字路口:要么投入资金解决问题,要么投入工程时间来正确解决问题。当然,我们可以升级我们的硬件——TypeScript 性能只影响开发,而不影响生产。但这个解决方案感觉就像是创可贴。我们选择了更困难的道路:使用 Turborepo 将我们的整体重构为 monorepo。

移民之旅

第一步非常简单——迁移结构而不拆分任何代码。我创建了一个包含 Web 应用程序的 apps 文件夹,并添加了两个用于 ESLint 和 TypeScript 配置的标准 Turborepo 包。但真正的测试是在保留类型推断的同时移动我们的核心功能。

我从数据库层开始,将所有与 Prisma 相关的代码移至其自己的包中。经过一些 package.json 导出调整后,我屏住呼吸并检查了主应用程序中的类型。他们工作得很好。更好的是,当我的同事取消更改时,他几周来第一次收到了 IntelliSense 建议。我们正在做某件事。

接下来是 tRPC,这看起来很合乎逻辑——另一个独立的服务器端功能。但这就是事情变得有趣的地方。最初的“只是移动 tRPC”最终导致了一系列意想不到的依赖关系:

  • 我构建的集成库
  • 使用 MJML 和 React 模板构建的邮件系统
  • Trigger.dev 工作流程分为 v2 和 v3

经验教训

这次迁移教会了我一些关于架构和开发实践的重要课程:

  1. 服务器-客户端分离很重要:虽然 Next.js 可以轻松混合服务器和客户端代码,但这种便利可能会导致混乱的架构。我发现自己跨边界导入类型和常量,而没有考虑其含义。

  2. 从 Monorepo 开始:如果我今天重新开始,我会从第一天开始从 Turborepo 开始。它增加了最小的复杂性,同时迫使您以健康的方式思考依赖关系和架构。

  3. 显式依赖关系更好:打破整体迫使我们可视化并质疑我们的依赖关系。这些连接有必要吗?我们是否创建了循环依赖?这些限制促使我们做出更好的架构决策。

未来之路

迁移尚未完成。我们的服务器代码和共享实用程序仍然需要适当的组织,并且我们正在重新考虑我们的模块结构,因为 tRPC 和数据库层是分开的。但我们的开发体验已经有了显着改善。

对于构建可扩展的 Next.js 应用程序的任何人,请考虑从 monorepo 结构开始。初始投资很少,但它提供的建筑护栏是无价的。未来的你以及你团队的旧笔记本电脑都会感谢你。

以上是从 Monolith 到 Monorepo:Next.js 迁移故事的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:dev.to
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板