为什么要做组件拆分
当页面逐渐复杂时，先把职责边界拆清楚，比一开始追求“写得快”更重要。博客项目里最适合拆分的通常是：
- 布局组件
- 内容卡片
- 侧边栏模块
- 页面级路由组件
迁移到 Next.js 时要关注什么
从 Vite 迁移到 Next.js，最常见的变化主要集中在下面几个点：
- 路由从前端路由表改成文件系统路由。
- 链接和导航要切换到
next/link、next/navigation。 - 图片、静态资源和客户端组件边界要重新梳理。
- 需要区分哪些逻辑适合服务端渲染，哪些必须放到客户端。
一个稳妥的迁移顺序
第一步：先让页面跑起来
优先完成目录结构、路由、依赖和基础样式迁移，不要一开始就陷入细节优化。
第二步：再处理交互细节
等页面能稳定构建之后，再去修复搜索、主题切换、文章目录、高亮状态这些体验问题。
第三步：最后补齐体验
这一阶段再处理 SEO、元信息、加载态、错误页和动画细节，效率会更高。
迁移过程中容易踩的坑
直接复制旧项目代码通常不够，还要把“运行方式”一起迁移。
- 旧项目中的
react-router-dom代码不能原样保留。 - Vite 的
?raw导入在 Next 中需要替代方案。 - 使用浏览器 API 的组件必须声明为客户端组件。
- 静态图片导入后，普通
img标签通常需要使用.src。
小结
一次成功的重构，不只是把代码“搬过去”，而是让项目在新的框架约束下依然清晰、稳定、可继续开发。