Wenzi

使用 nextjs 重构我的个人博客

蚊子前端博客
发布于 2024/08/22 21:48
使用 Next.js 重构了我的个人博客系统,方便后续的开发和维护

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

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管理代码,还可以接入流水线进行发布。

标签:nextjsblog
阅读(424)
Simple Empty
No data