使用Next.js重构博客并部署
缘由
随着前端的发展，一直想找个机会使用React生态的库来重构博客，遗憾的是时隔3年才付诸行动。
重构博客一方面是想重拾记录技术的习惯，另一方面是想通过重构博客来确立前端开发到部署的最佳实践，方便后续项目的开发。
技术选型
首先确定是使用React生态的库。因为之前有过Vue 2.0相关的开发经验，感觉进行Vue.js应用的开发需要一直查阅文档，api比较多，属于可以使用多种方法实现一个功能，而不是用一种方法做到最好的类型，开发心智负担比较重，最后代码的实现也不够清晰简洁。并且Vue 3.0引入了class api，可以看到是在朝着jsx的方向发展，因此不如直接学习React，并且原生支持Typescript，有利于之后将项目转为tsx。
React生态的脚手架有多种选择，可以使用CRA（create-react-app）,也可以使用Gatsby或者Next.js。另外，由于写博客本身需要专注于内容的输出，不希望在博客本身的搭建上浪费太多时间，需要考虑可以直接将markdown文件转换为html输出。考虑到替换Hexo，在文档的技术选型上还有Docz、Docusaurus等等。最后进入决赛圈的有Gatsby、Next.js和Docusaurus。
Docusaurus属于比较新的文档生成工具，背靠facebook，不仅可以生成文档，也有生成blog的功能，2.0刚刚出来，功能还不全，感觉比较重，pass。
Gatsby是静态站点生成工具，出来时间也比较久了，功能很成熟，定制化强，但是相应的学习曲线也比较陡峭；只能支持SSG，这对于之后的拓展不太友好，pass。
最终选择Next.js。其实一开始对这个框架就比较关注，Vue生态里有Nuxt.js与之对应，React生态中与之对应的还有UmiJS。Next.js相对于其他库来说还是比较轻量级的，支持SSG同时也支持SSR。并且从官网的风格上看也比较舒服，属于简约性冷淡风格，文档也非常友好，果断选择它来搭建前端框架了。
学习入门
一般来说学习新事物最好是从最简单的基础开始，从这点上来说最开始应该使用CRA搭建框架，再一点一点往上加功能。但是首先CRA不支持路由，这意味着最基本的路由功能都需要自己写，就比较费时间，而在Next.js中路由已经是开箱即用的了，更不用说其他apiRoute和cssModule等的支持，可以将开发心智负担降到最低，对于我目前唯一的目标：重构博客，是最合适的选择。
并且在它官网的文档中，发现有一步到位的学习教程，最终可以搭建一个静态博客，就再好不过了。通关博客搭建教程后，直接得到了一个可以将markdown文件转换为博文的博客脚手架。所以直接将之前Hexo的markdown文件粘贴到新的脚手架中，再执行next build && next export即可。
博客部署
之前博客是通过Github Pages部署的，新的脚手架SSG生成的静态文件上传后发现Github会屏蔽_next目录下资源的访问，会报404。正好不满于Github Pages的访问速度，干脆换别的方式部署。
静态资源托管服务比较有名的有Netlify和Vercel，而Vercel正好就是开源了Next.js的公司。首先测试了下Netlify的托管服务，发现不仅访客数据分析需要花钱购买服务，而且访问速度也比较拉胯。果断选择Vercel，发现果然自家的服务最到位，不仅个人账号永久免费，还支持数据分析，PC访问首页速度基本在1s左右，还支持HTTPS，域名DNS解析转入非常顺滑，目前为止还是非常满意的。之后观察可以的话，以后的前端静态站点都会部署到Vercel上面。
TODO
目前博客虽然已经完成了重构和部署，毕竟样式还是使用的Next.js教程中的，虽然颜值也还算在线，但功能还是比较单一。目前博客的框架已经成型，关于Next.js的很多功能和自定义组件还需要探索。之后需要考虑加的功能区块有：
- 关于（About）
- 标签（Tag）
- 页面头部的外链，包括Github链接的样式
- 头像
- 404页面展示优化