基于Next.js和Notion Public API构建的博客系统，支持在Notion中嵌入MDX代码来实现更加丰富的效果。

English

特性

1. 使用Next.js、TypeS、TailwindCSS构建。
2. 使用Notion作为CMS，支持在Notion中嵌入MDX代码。
3. 使用Notion Public API，同时支持缓存数据，提升整体性能。
4. 支持深色模式、多语言支持。
5. 支持Next SSG。
6. SEO友好
7. 使用umami、Google Analytics 作为站点统计工具。
8. 使用Supabase实现用户认证管理

技术栈

框架

1. Next.js
2. Notion
3. Tailwind CSS 和 shadcn
4. Supabase

组件

1. Shiki: 渲染code块
2. React-pdf: 渲染pdf块
3. iframely / unfurl: 渲染bookmark、link-preview和video块（Notion仅返回URL，不含Open Graph信息）
4. Katex: 渲染equation块
5. MDX: 渲染mdx

Live demo

• https://goroutine.cn/
• https://next-blogger-inky.vercel.app/

入门指南

前提条件

1. 复制这个Notion模板，并编辑你的博客内容。
2. 按照Notion的入门指南获取NOTION_TOKEN和NOTION_DATABASE_ID。

开发及部署

1. 设置：对项目标星并Fork
2. 安装依赖：

npm install

3. 设置你的.env文件，填入NOTION_TOKEN和NOTION_DATABASE_ID

NOTION_TOKEN=
NOTION_DATABASE_ID=

# for supabase
NEXT_PUBLIC_SUPABASE_URL=
NEXT_PUBLIC_SUPABASE_ANON_KEY=

4. 本地运行

# 本地开发
npm run dev

# 生产环境构建与启动
npm run build
npm run start

打开http://localhost:3000即可在浏览器中查看结果。

关于Notion

方案选型

1. 为何选用Notion作为内容编辑器？ 本人已有多年使用Notion的习惯，以前博客的做法是将用Notion写好后再copy到Markdown等编辑器，然后使用hexo发布。这样流程会非常长，而且需要转换为markdown格式，流程非常的不方便。所以直接使用Notion作为CMS，写好的内容可以直接发布。也不需要修改后的频繁同步。

2. 为何要重造轮子，而不是直接使用react-notion-x等已有的能力实现。 原因主要是git上大部分实现都是基于Notion非公开的API，存在以下缺陷：

• 非公开的API要求将Notion数据publish到外网，无法保障数据隐私。
• 非公开的API需要cookie，存在后续可能废弃、变更的隐患，稳定性无法保障。
• 非公开的API在测试时发现page内容过大时会存在拉取失败的情况。而公共API支持分页，稳定性更可靠。 总之，虽然Public API在高级特性上有所缺失，比如不支持 Database View 等能力，但是基本能力已经可以满足需求。故最终选择采用Notion Public API实现。

其他说明

1. 读书笔记支持 读书笔记内容来源于微信读书，将微信读书的内容定期同步到Notion中，然后通过Notion的API获取数据，再通过Next.js渲染。 同步方案参考 sync-notion

支持的Notion Block类型

大多数常见的块类型都受支持。但是，Public API中不支持某些块的信息，因此我们提供了简化的渲染。

Block Type	Supported	Notes
Paragraph	✅ Yes
Headings	✅ Yes
Bookmark	✅ Yes	Use unfurl.js
Bulleted List	✅ Yes
Callout	✅ Yes
Child Databases	✅ Yes	Use tanstack/table
Child page	✅ Yes
Code	✅ Yes	Use shiki and MDX
Column list and column	✅ Yes
Embed	✅ Yes
Equation	✅ Yes	Use katex
File	✅ Yes
Image	✅ Yes	No position、size info in API
Link Preview	✅ Yes	Use unfurl.js
Mention	✅ Yes	Only Date
Numbered List	✅ Yes
PDF	✅ Yes
Quote	✅ Yes
Synced block	✅ Yes
Table	✅ Yes
To do	✅ Yes
Toggle blocks	✅ Yes
Video	✅ Yes	Use iframely
Breadcrumb	❌ Missing	Not planned
Template	❌ Missing	Not planned.
Divider	❌ Missing	API Unsupported.
Table Of Contents	❌ Missing	API Unsupported.

Why iframely?

1. image, video, bookmark 以及 link-preview等类型的block，Notion API仅返回URL，没有渲染相关数据结构（如title、desciprtion、icon等）。所以需要自己寻求解决方案，此处选择了iframely作为替代。Notion官方也是采用iframely。

2. iframely需要付费，所以也采用了unfurl.js作为兜底，效果上会有差距。

配置

1. 顶部导航
2. 支持的环境变量, 包括NOTION_TOKEN, NOTION_DATABASE_ID等。

• 自部署时请在.env文件中设置。或者在vercel面板上设置。
• MDX开启： RENDER_MDX=true 且在notion的code block中设置语言为markdown
• redis缓存开启： REDIS_URL="redis://localhost:6379"，否则使用内存、文件缓存
• Notion数据过期时间 NEXT_DATACACHE_EXPIRE，默认1小时。注意如果使用Notion存储了pdf、图片等文件，过期时间不要过长，否则文件链接可能过期。
• 开启微信读书笔记：配置NOTION_NOTE_DATABASE_ID

Reference

1. Notion Public API
2. Next.js