我之前的博客,是在 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
管理代码,还可以接入流水线进行发布。