transitive-bullshit/nextjs-notion-starter-kit

这是什么？

核心功能

• 01以公开的 Notion 页面作为内容源，通过单个配置文件完成设置。
• 02借助 react-notion-x 渲染 Notion 内容。
• 03自动生成简洁的页面 URL 和社交分享预览图。
• 04提供随滚动高亮的目录和深色模式。
• 05可选启用 Redis 缓存以及 Fathom 或 PostHog 统计。

适用场景

• 用 Notion 写作并搭建个人博客。
• 基于 Notion 数据库管理内容，制作作品集或项目展示网站。
• 将 Notion 页面发布为公开的文档或知识库。

快速上手

1. 1

   Fork 或克隆仓库，并在 site.config.ts 中设置 rootNotionPageId

2. 2

   安装依赖（需要 Node.js 22 或更高版本）

   pnpm install
3. 3

   启动本地开发服务器进行测试

   pnpm dev
4. 4

   部署到 Vercel

   pnpm deploy

使用前须知

• !根 Notion 页面必须公开，网站才能正常工作。
• !社交预览图需要关闭 Vercel Authentication，否则爬虫会收到 401 错误。
• !除非配置外部 Redis，否则预览图生成可能较慢。

标签

常见问题

nextjs-notion-starter-kit 是什么？

基于 Next.js 的入门模板，可将公开的 Notion 页面一键部署为博客或作品集网站。 Next.js Notion Starter Kit 把 Notion 当作内容管理系统使用。只需在配置中填入公开 Notion 页面的 ID，应用就会把该页面及其中的子页面和数据库渲染成网站。Notion 内容的渲染由 react-notion-x 完成，项目面向 Vercel 部署设计。

nextjs-notion-starter-kit 可以免费使用吗？用的什么许可证？

nextjs-notion-starter-kit 以 MIT 许可证开源。用于商业产品前，请先确认许可证条款。

nextjs-notion-starter-kit 还在维护吗？

活跃维护中。nextjs-notion-starter-kit 最近一次提交是在 2026年10月18日。

nextjs-notion-starter-kit 适合用来做什么？

用 Notion 写作并搭建个人博客。 基于 Notion 数据库管理内容，制作作品集或项目展示网站。 将 Notion 页面发布为公开的文档或知识库。

nextjs-notion-starter-kit 怎么安装和运行？

Fork 或克隆仓库，并在 site.config.ts 中设置 rootNotionPageId 安装依赖（需要 Node.js 22 或更高版本）: pnpm install 启动本地开发服务器进行测试: pnpm dev 部署到 Vercel: pnpm deploy

在哪里获取 nextjs-notion-starter-kit？

源代码和安装说明在 GitHub 上：https://github.com/transitive-bullshit/nextjs-notion-starter-kit