我用Next.js App Router写了一个博客

在我分享我新博客的开发经历前，也许你想先看一下我的博客。

2020年的时候，React推出了Server Components，当时令我惊讶的是能够写异步组件。

写异步组件也许不是什么新奇的事，更早以前就出现过一个昙花一现的框架，语法使用JSX，即便是客户端组件也可以写异步组件。

新奇的是落后的React竟然支持异步组件，即便只能在Server运行，但是在当时没有稳定的框架来使用它。机缘巧合下，去年的新项目需要使用Next.js，在我的建议下采用了官方推荐的App Router，顺理成章的使用上了React Server Components。

为了更熟练的学习React Server Component ，我准备使用App Router重写我的博客，在此之前，我的博客使用的是Astro，这是旧博客的预览。

我对自己新博客的要求：

对于第一点，Server Component的表现令人满意。

对于第二点，我目前使用了：

其中重点在于MDX和shiki，我希望在博文中尽可能多的以代码作为示例，并且读者能够与之互动，shiki支持很多插件，比如diff、focus、hilight，最棒的是twoslash，这样代码块展示能够更加友好。

MDX和shiki简直是天生一对，这么多效果，都可以无需打包js，全部在Server端运行。

对于第三点，我使用了一种新的方式：

使用GitHub Discussions作为博客后台管理

我未见过其他人使用这种方式，在我看来，这比采用GitHub Issus更加友好，更像一个博客后台，它有几个优点特别突出。

权限管理 ------ 除了作者本人，别人无法发表内容，只允许评论（这是GitHub Issues无法做到的）。
博文类别 ------ GitHub Disscussion 允许创建多个Categories （GitHub Issues同样无法做到）。
博文标签 ------ 自定义任意文章标签，同时可以修改标签颜色。
图片资源上传 ------ 当你在Disscussions输入框中粘贴图片时，它会自动上传至Github。
评论 ------ GitHub完整的评论系统，包括点赞、回复、甚至是提及其他人（Discussions 和Issus中的评论功能略有不同）。

同时Github 具备完善的GraphQL API，我们可以使用任意前端技术开发博客，甚至是控制台应用。

对于第四点

我在Dribbble 学习了Bento风格，同时参考了一些Bento风格的博客，并受到了一些启发。

目前博客还缺少的内容：

如果您预览了我的博客并觉得还不错，您可以访问我的GitHub仓库，支持一键部署，并有简单的Fork教程。