博客重构，从 Bootstrap 到 Next.js + MDX

写在重构之前

我的个人博客已经陪伴我走过了八个年头。那些用 Bootstrap 搭建的页面，记录着我初学编程时的青涩代码，见证了前端生态从后端渲染到前后端分离、到单页应用、再到如今的服务端渲染的演变。 我很早之前就想重构了，但是没有足够多的精力去做这件事，随着AI编码的迭代，我决定彻底重构这个"老伙计"。

重构的理由

告别过时的技术栈

早期的技术选型如今早已被淘汰，千篇一律的栅格布局与当下流行的极简设计格格不入，也难以实现动态内容加载和现代化的开发体验。

拥抱现代技术栈

重构成为学习新技术的最佳实践场，我选择了 Next.js 和 MDX 作为新一代的技术栈，前者提供了强大的服务端渲染和静态生成能力，后者则让 Markdown 与 React 的结合变得无缝。

提升用户体验

新博客将提供更快的加载速度、更流畅的交互体验和更丰富的内容展示方式，后续会更新一些交互式文档和交互式代码沙盒的功能。

新博客的 MDX 展示

Mdx 支持更加丰富的组件化展示，比软下面这样：

内容卡片系统

提示组件

让提示信息更具表现力：

代码对比

清晰展示代码变更差异：

function oldComponent() {  
  return <div>旧组件</div>
}  
 
function NewComponent() {  
  return <AppFrame>新组件</AppFrame>
}

多语言代码切换

便捷展示不同技术方案的实现：

function Button() {
  return <button>Click</button>
}

Npm Package 组件

npm i next -D

写在最后

技术永远在变，但对极致体验的追求永不止步！