旧版前端现代化改造
没有 TypeScript。没有代码检查工具。没有 Sentry。170 个地点每天都在使用。
在保持产品对现有用户可用的同时，渐进式改造一个无类型、无监控的旧版前端。
阅读时间：5分钟作者 Abdullah Raheel
继承而来的限制确实存在
接手的 CRA 前端使用原生 JavaScript，没有 TypeScript、ESLint、Prettier、Sentry、可复用组件系统或清晰一致的功能结构。它包含超过 5,000 行原始 CSS、被内联样式覆盖的 Tailwind 类、复制的页面和扁平目录结构。
这些问题相互加剧。API 更改在没有编译器反馈的情况下抵达浏览器；复制的界面反复出现相同样式错误；由于没有监控路径，生产错误通常只能通过用户报告发现。
维护成本已经影响用户
该应用每天仍为 170 个客户地点提供服务。我们没有就地转换 V1，也没有等待完整替代系统。旧路由继续运行，但每条新的 V2 路由都必须符合新标准。
这样团队就有了一条简单规则：不要扩展旧版约定。重建某条路由时转移其所有权，新路由在生产环境运行后再移除旧路径。
建立类型化边界
Next.js 15 和 TypeScript 构成新的边界。新路由使用类型化路由定义、生成的 API 客户端、共享请求行为和功能自有组件。团队没有先转换每个旧版文件，而是停止增加新的无类型区域，并在工作触及各路由时把所有权迁入 V2。
- TypeScript 和类型化路由让导航及 API 结构错误在开发期间可见。
- 生成的客户端和共享请求行为取代了分散的请求约定。
- 功能文件夹为路由、Hooks、模式定义和测试指定明确负责人。
- 可复用基础组件取代了为重复交互模式创建的页面级副本。
迁移所有界面前先建立反馈循环
现代化改造也改变了故障检测方式和更改准入方式。Sentry 增加客户端、服务器端和边缘端报告，以及应用错误边界。单元测试和浏览器测试工作流加入明确的必需门禁，面向行为的测试则覆盖 Investor Intake 等高风险流程。
这些控制措施不会自动修复 V1。它们让每条 V2 路由在承担更多生产职责前即可观测、可测试。
在旧产品外围建立新边界
V2 负责全局界面框架、身份验证和每项新迁移的功能。CRA 只针对仍由其负责的路由保留在一个 iframe 中。配套迁移文章详细介绍 postMessage、SSO 和路由桥接。
对本文而言，重点是所有权：新标准在 V2 边界生效，每完成一次迁移，不受这些标准约束的代码就会减少。
在过渡期间明确责任归属
迁移期间会明确跟踪所有权。Navbar、Topbar、Settings、Investor Intake、Authentication 和 Twilio 迁入 V2；Home、Genius Mode、Deals 和 Buyers 则留在 V1，直到替代实现准备就绪。客户地点分批受控迁移，而不是一次性接收所有未完成界面。
这份清单避免重写变成边界不明的并行项目。一项功能要么仍由 V1 负责，要么通过兼容边界提供，要么已经原生运行在 V2 中。
现代化是一段过程，而不是一个事件
最终切换移除了 iframe、旧版生成的客户端和桥接代码，随后清理废弃路由、测试、认证守卫、拨号器共享逻辑和组件结构。只有临时边界可以删除时，现代化改造才算完成。
- 不要用新建框架文件的数量衡量进度。
- 衡量哪些生产职责已经迁移，以及哪些兼容路径可以移除。
- 让新代码遵守新标准，不要等待整个代码库一次性完美转换。
- 最后一个依赖界面迁移后，删除临时迁移基础设施。