使用 nextjs 重构了我的个人博客

我之前的博客，是在 2017 年时基于 php 的 CodeIgniter 框架实现的。现在我使用了 Next.js14 重构了我的个人博客。

我的个人博客地址： https://www.xiabingbao.com；

1. 原因

主要是因为以下的几个原因吧，决定要重构我的个人博客：

1. 框架是 php，php 本身没啥问题；但我现在主职前端开发，在调整和重构我的博客时，对 php 的语法和框架已经不是很了解了，实现起来及其缓慢，最终决定使用熟悉的 nodejs 框架，即nextjs;
2. 博客是由三套独立的代码完成的，开发起来不方便，博客本身是 php，前端的基本交互是原生 js 实现的，前端评论功能又是基于 React 实现的；
3. 逼迫自己用一套 nodejs 的框架，可以在实际中运用和测试，方便掌握更多的技能；
4. 使用 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管理代码，还可以接入流水线进行发布。