使用 Next.js 13 app dir 和 Notion 构建的个人博客

[Hyoban]

• 预览地址 https://hyoban.cc
• GitHub 开源地址 https://github.com/hyoban/blog-next-notion

因为对 Next.js 13 新的 app 目录的 react 服务端组件很感兴趣，想要就用一个项目来学习它，然后就构建了自己新的个人网站。 让我来介绍一下网站的特点：

1. 使用 notion 官方 api 获取文章数据，使用服务端组件渲染直出，性能好
2. Next.js 的增量渲染使得网站无需重新编译部署也能获得动态展示的能力
3. 订阅列表页面，来展示从自己订阅的博客 rss 的信息

然后也是希望通过分享自己的博客，认识一些朋友，欢迎大家给我的代码指出意见，和我交流。

[me404]

确实很快

[me404]

一会看看那个点击文章图片上移怎么实现的

[Hyoban]

@me404 用的 framer motion ，实现很简单。https://github.com/hyoban/blog-next-notion/blob/main/app/components/SharedElement.tsx

[jsomin]

最近也想学习一下 nextjs ，楼主是从哪里开始学习的？ 目前我就看了官网文档。

[Hyoban]

@jsomin 我也是的，就是看 https://beta.nextjs.org/docs ，然后上手写东西。你可以看看我的代码，基本上就相当于个 playground ，学到啥就用啥写个东西，很快就上手了。

[Envov]

原来是 memeos 作者
审美果然杠杠的

[Hyoban]

@Envov 不是作者哈，我差太多了，只是偶尔给 memos 修修小 bug