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

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

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

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

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

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

我对自己新博客的要求:

  1. 完全使用App Router,尽可能的使用Server Components优化性能。
  2. 采用最新,最前沿的技术。
  3. 无后台服务。
  4. 尽可能的美观。

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

对于第二点,我目前使用了:

  1. TailwindCSS ------ 无需多言。
  2. React Aria Components ------ 不是shadcn/ui,也不是radix-ui
  3. @tabler/icons-react ------ 超过5k个图标,令人惊叹。
  4. shiki ------ 更新,更强大的代码语法高亮。
  5. MDX ------ 在Markdown中写React代码。

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

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

对于第三点,我使用了一种新的方式:

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

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

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

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

对于第四点

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

目前博客还缺少的内容:

  • RSS订阅
  • 动效
  • 更多有趣的Bento板块
  • shikitwoslash样式

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

相关推荐
华仔啊5 小时前
前端必看!12个JS神级简写技巧,代码效率直接飙升80%,告别加班!
前端·javascript
excel5 小时前
dep.ts 逐行解读
前端·javascript·vue.js
爱上妖精的尾巴5 小时前
5-20 WPS JS宏 every与some数组的[与或]迭代(数组的逻辑判断)
开发语言·前端·javascript·wps·js宏·jsa
前端大卫5 小时前
一个关于时区的线上问题
前端·javascript·vue.js
whltaoin6 小时前
中秋赏月互动页面:用前端技术演绎传统节日之美
前端·javascript·html·css3·中秋主题前端
是垚不是土8 小时前
Prometheus接入“飞书“实现自动化告警
运维·安全·自动化·github·飞书·prometheus
铅笔侠_小龙虾9 小时前
动手实现简单Vue.js ,探索Vue原理
前端·javascript·vue.js
哟哟耶耶11 小时前
Starting again-02
开发语言·前端·javascript
Kitasan Burakku11 小时前
Typescript return type
前端·javascript·typescript
绝无仅有11 小时前
消息队列mq面试经典问题与解答总结
后端·面试·github