使用 Next.js 13 app dir 和 Notion 构建的个人博客
Hyoban · hyoban · 2023-03-23 11:21:14 +08:00 · 1494 次点击这是一个创建于 397 天前的主题，其中的信息可能已经有所发展或是发生改变。
- 预览地址 https://hyoban.cc
- GitHub 开源地址 https://github.com/hyoban/blog-next-notion
因为对 Next.js 13 新的 app 目录的 react 服务端组件很感兴趣，想要就用一个项目来学习它，然后就构建了自己新的个人网站。 让我来介绍一下网站的特点：
- 使用 notion 官方 api 获取文章数据，使用服务端组件渲染直出，性能好
- Next.js 的增量渲染使得网站无需重新编译部署也能获得动态展示的能力
- 订阅列表页面，来展示从自己订阅的博客 rss 的信息
然后也是希望通过分享自己的博客，认识一些朋友，欢迎大家给我的代码指出意见，和我交流。
 |
1
me404 2023-03-23 11:28:40 +08:00
确实很快
|
|
2
me404 2023-03-23 11:28:57 +08:00
一会看看那个点击文章图片上移怎么实现的
|
 |
3
Hyoban OP @me404 用的 framer motion ，实现很简单。https://github.com/hyoban/blog-next-notion/blob/main/app/components/SharedElement.tsx
|
 |
4
jsomin 2023-03-23 17:09:59 +08:00
最近也想学习一下 nextjs ，楼主是从哪里开始学习的？ 目前我就看了官网文档。
|
|
5
Hyoban OP @jsomin 我也是的，就是看 https://beta.nextjs.org/docs ，然后上手写东西。你可以看看我的代码，基本上就相当于个 playground ，学到啥就用啥写个东西，很快就上手了。
|
 |
6
Envov 2023-03-23 23:10:44 +08:00
原来是 memeos 作者
审美果然杠杠的 |
Select Language