December 15, 2024

Next.js 和 React 使用报告(二)

咳咳,本博客已经转向 Next.js,足以证明 Next.js 框架的先进(自卖自夸)。

遗憾的是至今都没有对 Vue 感兴趣,所以本期使用报告并不会有那样的对比,但还是有别的内容的。

Vercel

之前自己的博客是搭建在 GitHub Pages 上的,而 GitHub Pages 是一个静态网页托管平台,这说明网页的内容是静态的,这很适合博客这一类更新频率低,不需要用户登录交互的场景。

这次转向 Vercel 单纯是因为其对 Next.js 有很好的支持 —— 因为 Vercel 就是搞 Next.js 的那群人做出来的。

可玩性比 GitHub Pages 要高多了,不局限于原先的 Hexo 框架Butterfly 主题,任何地方都能自己去设计。

Vercel 还提供了 AnalyticsSpeed Insight 功能,可以查看网页状态,开箱即用非常方便。

其实之前也想用 GitHub Actions 来监视仓库变化,以自动构建、部署网页,但总之还是麻烦的,后面不了了之。而 Vercel 在链接到 GitHub 仓库后就能自动 CI/CD,极度方便线上做一些简单的改变 —— 用 GitHub 客户端写个 MDX 的事。

International

国际化一直是我很喜欢做的一件事,Mercurius 就实现了 en、zh-CN、ja 三种语言,我也想博客支持多语言。

国际化的资料还是比较少,直到 Next.js 15 才内置了这个功能(存疑)—— 虽然说在此之前我也不知道国际化是个什么情况就是了。

其实我一度想用 Docusaurus 来搭建博客,但正如前面提到的,不想被某个框架局限,最终还是决定自己搭建。

但这也带来了一个问题,该如何对 MDX 内容进行国际化?目前我还没有想到一个好方法。

字体

前面的国际化同样会带来一个问题,如何对字体进行国际化。要知道汉字在不同的国家和地区会有不同的字形 ……

总之先摸鱼了,优先度比较低的 Issue 总是这样,被忽略,被拖延 ……

NextUI

我很喜欢 NextUI 这个 UI 库,其更新频度挺高的,可惜目前我重写博客的时机好像有点不太好,卡在 Next.js 14 到 15、Tailwind CSS 从 v3 到 v4、NextUI 更新 v2.6 版本、ESLint 结束 v8.x 版本维护的这个时间点,许多从网上找的教程还是基于老版本的,也就带来了不便。

好像有点偏题了,说回 UI。

我不会设计颜色,或者说我想要使用的颜色很难去找到一个好看的色盘:

就以彩虹上出现的七种颜色来说,红色用于 Error,橙色用于 Warning,绿色用于 Success,蓝色用于 Primary,紫色用于 Secondary。但我一旦想把橙色作为 Primary,一下就很难设计一个好看、直观的色盘了。

对于背景色,我直接抄的 One Dark Pro 的颜色,这真的好看吧。

还有一点,我已经很久没使用亮色模式了,所以对于设计出的亮色模式下的配色,我是极度的感到不适应 ……

其实博客只想支持暗色模式的,但 挑战自己,逆境翻盘 这就当作是学习了 —— 实际上还不应该拘泥于 light 和 dark 两种模式,多主题不是更好?

包管理器

目前我使用的是 yarn v4 版本,目前我还是挺喜欢这个包管理器的,但像是 pnpmbun 我也非常想尝试,什么时候会转向 pnpm 或者 bun 也说不定,特别是 bun,一个挺厉害的 JavaScript 运行时,还加了很多好东西 ……

但我之前在 Windows 安装后升级出了一点问题来着,也就暂时搁置了。

总结

Next.js 确实是很不错的网页前端框架,别急,与 Vue 的对比总会来的,实际上,我已经对 Vue 有一点看法了,按下不表喵。