从CRA到App Router的五个步骤：Graphite案例研究
内容提要
Graphite团队认为Next.js是构建可扩展高性能Web应用的理想框架。与Create React App相比，Next.js支持多种渲染策略和文件系统路由，提升了性能和开发体验。在迁移过程中，他们通过五个PR解决了HTTPS、本地SVG导入、文件结构重构、集成Next.js和服务器端渲染等问题，展示了迁移的可行性和价值。
延伸解读
迁移背景与挑战
Graphite 的代码库是一个庞大的 TypeScript monorepo，由数十名开发者同时协作，这增加了迁移的复杂性。他们最初的迁移尝试耗时、昂贵且中途失败。通过与 Vercel 团队交流并采用新的 App Router，他们最终将迁移浓缩为五个 PR，证明了在复杂项目中迁移的可行性。
Next.js 与 CRA 的核心差异
Next.js 支持多种渲染策略（SSR、SSG、ISR、CSR），而 CRA 仅支持客户端渲染。Next.js 使用基于文件系统的路由，简化了路由配置；CRA 则需要手动集成 react-router 等库。这些差异使 Next.js 在性能和开发体验上更具优势。
迁移中的技术决策
迁移过程中，团队通过五个 PR 解决了 HTTPS 本地开发、SVG 导入、文件夹结构重构、Next.js 集成和 SSR 等问题。例如，使用本地 SSL 代理解决 HTTPS 问题，引入 SVGr 处理 SVG 导入，重命名 pages 目录以避免冲突，并通过条件检查和空渲染解决 SSR 中的 hydration 不匹配问题。
迁移的启示与后续计划
Graphite 的案例表明，迁移到 Next.js 虽然涉及多个步骤，但通过分解为小规模 PR 可以降低风险。他们暂时保留了客户端路由模式，并计划后续完全集成 Next.js 的路由和其他功能。这为类似规模的团队提供了可借鉴的迁移路径。
Q&A
为什么Graphite团队选择迁移到Next.js？
Graphite团队认为Next.js是构建可扩展高性能Web应用的理想框架，支持多种渲染策略和文件系统路由，提升了性能和开发体验。
Next.js与Create React App的主要区别是什么？
Next.js支持多种渲染策略（如SSR、SSG等）和文件系统路由，而Create React App仅支持客户端渲染，且没有内置路由功能。
Graphite团队在迁移过程中遇到了哪些主要问题？
他们遇到的问题包括HTTPS支持、本地SVG导入、文件结构重构、集成Next.js和处理服务器端渲染等。
Next.js如何优化性能？
Next.js通过代码拆分、自动图像优化和智能预取等功能，提供更快的加载时间和更好的用户体验。
Graphite团队是如何解决HTTPS支持的问题的？
他们采用了本地SSL代理，以便在本地开发中通过HTTPS提供内容，确保开发环境不变。
迁移到Next.js的过程是怎样的？
迁移过程通过五个PR完成，涉及HTTPS支持、SVG导入、文件结构重构、集成Next.js和处理SSR等步骤。
