共 2 篇相关文章
本文详细记录了将一个中型博客项目从Next.js迁移至React Router框架模式的完整过程与思考。迁移并非技术栈的简单替换，而是源于对Next.js生态逐渐封闭、捆绑部署与服务器组件过度依赖的不满，转而追求更轻量、更开放且完全可控的技术栈。核心挑战集中在数据获取、路由结构适配与服务器组件逻辑重写上。作者通过采用React Router v6.4+引入的数据路由（Data Router）模式，结合服务端渲染与流式渲染，成功实现了静态生成与动态数据的混合获取，同时将构建输出优化为独立的、可部署于任意Node.js环境的标准应用，显著提升了启动速度并降低了部署成本。文章特别指出，此迁移并非适用所有场景，其最终成果在于获得了对构建流程、部署架构与依赖关系的完全掌控，是基于项目长期维护与成本考量下的技术取舍，而非对Next.js的全盘否定。
作者此前使用Notion作为博客后端，在实践中遇到CSS定制困难、RSS生成消耗大量Vercel云函数配额以及页面意外无法访问等问题，促使他决定重建个人网站。新方案旨在将所有对外内容归集于 zgq.me 域名下，实现内容源的单一真实来源（Single Source of Truth），并解除对第三方的依赖。 技术实现上，网站继续基于Next.js静态站点生成，内容从Markdown文件读取，替代了Notion作为CMS。文章从Notion导出后，按slug整理并包含Front Matter元数据，目录以年份组织。Markdown解析采用@mdx-js/mdx，样式方案选用Tailwind CSS以保持简洁。 重建过程重点解决了几个技术细节：处理Next.js无法直接引用public目录外资源的问题，通过复制文件至static目录并修改URL访问路径；针对Vercel部署后图片缓存策略（max-age为0）的问题，在CDN层面进行配置优化，并预加载图片尺寸以避免布局偏移。此外，作者计划重新构建极简的评论系统，采用SQLite作为数据库，基于Koa和React开发前后端，以降低维护负担。 整个重建过程体现了作者对技术栈自主性、内容所有权及系统简洁性的追求，参考了多位同行的实践经验。
