我之前的博客，是在 2017 年时基于 php 的 CodeIgniter 框架实现的。现在我使用了 Next.js14 重构了我的个人博客。
1. 原因 #
主要是因为以下的几个原因吧，决定要重构我的个人博客：
- 框架是 php，php 本身没啥问题；但我现在主职前端开发，在调整和重构我的博客时，对 php 的语法和框架已经不是很了解了，实现起来及其缓慢，最终决定使用熟悉的 nodejs 框架，即
nextjs; - 博客是由三套独立的代码完成的，开发起来不方便，博客本身是 php，前端的基本交互是原生 js 实现的，前端评论功能又是基于 React 实现的；
- 逼迫自己用一套 nodejs 的框架，可以在实际中运用和测试，方便掌握更多的技能；
- 使用 FileZilla 的 ftp 客户端上传代码，无法实现自动化；
其实在 2021 年左右，就用 Next.js 重构了博客的部分功能，但最终是放弃了。当时觉得还是博客的内容更重要，这系统就先将就着吧。
但在这 3 年期间，给博客添加和调整一些功能时，实在是不方便，最终决定还是用 Next.js 重写了博客系统。
在这重构的过程中，我尽量保持了前端样式的一致性，大部分主要功能都已经实现，还有一些功能在慢慢迁移中。
2. 开发过程 #
Next.js 在之前还是用的page router，现在再次使用时，就已经在推荐App Router了。顺着官方教程，一点一点的实现，最终实现了一个完整的博客系统。
Next.js 可以被视为一个“约定大于配置”（Convention over Configuration）的框架。这一理念意味着框架通过一系列预定义的约定（如文件结构、路由方式、数据获取方法等）来减少开发者需要进行的显式配置量。这些约定旨在简化开发流程，提高开发效率，同时保持项目的结构清晰和可维护性。
Next.js 的 App Router 是从 Next.js v13 引入的新特性，它提供了一种更为灵活的方式来组织和管理应用中的页面、布局和共享组件。以下是如何使用 App Router 进行开发的一些基本步骤：
2.1 使用 app 目录 #
确保项目结构包含 app 目录，这是 App Router 的入口点。如果使用的是 create-next-app，这个目录应该已经为你准备好了。
打算以何种路由访问，就创建类似嵌套的文件夹，然后新建page.js来承接页面逻辑。
若是动态路由，可以通过在 app 目录下创建 [slug].js 文件来支持动态路由。例如：
// app/[slug]/page.js
export default function Page({ params }) {
return <div>Page: {params.slug}</div>;
}
2.2 后端接口 #
Next.js 提供了内置的 API 路由功能，用于处理后端接口请求。这些接口可以与前端页面进行交互，以获取所需的数据。
接口文件要放在当前页面文件page.tsx的同级目录下，并命名为api/route.ts。
这里尤其要注意的是，在 Next.js 中，fetch()方法已被框架重写，默认是自带缓存的，除非手动设置不缓存。但从Next.js v15开始，会默认不带缓存。
2.3 导航链接 #
使用 Link 组件来创建导航链接：
import Link from "next/link";
function Navbar() {
return (
<nav>
<Link href="/">Home</Link>
<Link href="/about">About</Link>
</nav>
);
}
2.4 使用的其他技术 #
- 样式上使用了
tailwindcss，不再单独写样式； - 管理后台和评论功能，使用了
antd的 UI 框架； - 代码高亮使用了
highlight.js组件；
3. 上线 #
现在的代码，接入了阿里提供的 云效，可以使用git管理代码，还可以接入流水线进行发布。