关于使用Next.js重构博客构思的记录

作者:J.sky · 发表于:
2023-08-11T11:36:13.000000Z
· 更新于:
2023-08-13T22:54:57.660467Z
· Tag: Next.js 碎言博客

手痒，又想重构博客了。博客的1.0使用的是Django，2.0使用的是JavaScript。3.0使用的python生成的静态页面，目前正在考虑使用Next.js重构现有博客。

为什么是Next.js

之前一直使用python作为主要的编程语言，编写了第一个版本的博客，大约使用了三年，缺点：部署和更新起来比较麻烦。后来使用python生成静态的HTML，但是前端修改起来还是不太方便，后来考虑使用react写成SPA+Ajax加载模式，可以解决前端打包编译优化的痛点，但是Ajax的缺点是不利于SEO，随着最近JavaScript的学习和技术推进，终于摸到了Next.js，原来Next.js这么强大和简单，从vue过渡到react，一直想有一种可以直接静态化站点的框架，这次Next.js终于可以入手了。

搭建Next.js博客的框架

创建博客项目，终端运行pnpm create next-app 项目名称：

D:\code\next> pnpm create next-app suiyan
../../.pnpm-store/v3/tmp/dlx-3784        |   +1 +
Packages are hard linked from the content-addressable store to the virtual store.
Content-addressable store is at: D:\.pnpm-store\v3
Virtual store is at:             ../../.pnpm-store/v3/tmp/dlx-3784/node_modules/.pnpm
../../.pnpm-store/v3/tmp/dlx-3784        | Progress: resolved 1, reused 1, downloaded 0, added 1, done
√ Would you like to use TypeScript? ... No / Yes
√ Would you like to use ESLint? ... No / Yes
√ Would you like to use Tailwind CSS? ... No / Yes
√ Would you like to use `src/` directory? ... No / Yes
√ Would you like to use App Router? (recommended) ... No / Yes
√ Would you like to customize the default import alias? ... No / Yes
Creating a new Next.js app in D:\code\next\suiyan.

Using pnpm.

Initializing project with template: default-tw


Installing dependencies:
- react
- react-dom
- next
- tailwindcss
- postcss
- autoprefixer
- eslint
- eslint-config-next

Packages: +303
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Packages are hard linked from the content-addressable store to the virtual store.
Content-addressable store is at: D:\.pnpm-store\v3
Virtual store is at:             node_modules/.pnpm
Progress: resolved 312, reused 303, downloaded 0, added 303, done

dependencies:
+ autoprefixer 10.4.14
+ eslint 8.46.0
+ eslint-config-next 13.4.13
+ next 13.4.13
+ postcss 8.4.27
+ react 18.2.0
+ react-dom 18.2.0
+ tailwindcss 3.3.3

Done in 16.5s
Initialized a git repository.

Success! Created suiyan at D:\code\next\suiyan

pnpm的好处这里就不再详细解释了，简单来说就是节省时间和硬盘空间，和rarn差不多一样吧，搞前端应该都知道。

进入suiyan目录，运行：

PS D:\code\next> cd suiyan
PS D:\code\next\suiyan> npm run dev
> suiyan@0.1.0 dev
> next dev

打开http://localhost:3000就会看到站点的首页了。我们修改suiyan\pages\index.js中的内容，保存后就会发现预览的首页也跟着变化了。至此，基于next.js博客项目就搭建完成了。

博客页面的生成

  1. 博客的博文页面，这个可以根据articles目录下.md文档自动生成相关的博文页面，npm install gray-matter,用来解析.md文档中的元数据。
  2. 博客的首页、标签、归档、页面的数据来源于所有.md文档的数据统计。
  3. layout中添加页面中的导航页尾等一些固定的元素，使用react的上下文固定一些常用的信息避免重复计算。
  4. 关于博文导航的分页（正在研究）
  5. 修改"build": "next build && next export",可以生成静态的HTML页面，是全站静态化。

使用next.js搭建博客的优点

  1. 前端调试极为方便，可以引入自己喜欢的前端UI库，打包压缩等都已经自动化了，不用再去考虑这些。
  2. 精简压缩了页面的JavaScript代码，打开页面速度快，seo友好。
  3. 各种依赖的插件和库很多，方便添加更多的功能。

总结

是否要会更换最新的博客，取决与代码编写的进度和功能的实现，我个人还是很期待的，但是next.js的编写经验还是很少，几乎为零，另外也不知道静态页面的生成速度如何，据说编译器是rust编写的速度很快，看样子可以一战。先试试再说了。

相关文章：