NotionNext README

The project's README from github.com/notionnext-org/NotionNext. As one markdown file: README.md.

NotionNext Logo

NotionNext

用 Notion 搭建自己的独立站

继续在 Notion 写作,一键发布为博客、作品集、知识库、导航站或产品官网。

在线预览 · 开始搭建 · 主题全览 · 用户作品 · 文档站 · 讨论区

中文 | English


NotionNext 是什么?

NotionNext 是一个基于 Next.js + Notion API 的开源站点系统。你继续用 Notion 管理文章、分类、标签、菜单和页面,NotionNext 负责把这些内容发布成可访问、可搜索、可运营的独立网站。

它适合想长期沉淀内容的人:内容创作者、独立开发者、设计师、摄影师、课程作者、开源项目维护者,以及需要快速搭建产品官网或知识库的小团队。

你可以用它做什么?

目标 推荐入口 适合人群
搭个人博客 从这里开始 内容创作者、独立开发者、学生
做作品集或个人品牌站 按场景选主题 设计师、摄影师、自由职业者
做产品官网或 SaaS 落地页 Starter / Landing / Proxio 创业者、独立产品、小团队
做知识库或文档站 GitBook / Claude 开源项目、课程作者、团队文档
做导航站或资源聚合 Nav 主题 资源整理者、社群运营者

为什么选择 NotionNext?

20 分钟部署路线

  1. 打开 主题预览站 看最终效果。
  2. 复制 NotionNext 官方 Notion 模板。
  3. Fork 本仓库到自己的 GitHub 账号。
  4. 使用 Vercel 部署 NotionNext。
  5. 在环境变量中填写 Notion 页面 ID 等配置。
  6. 部署成功后,按场景选择主题并补齐域名、评论、统计、搜索等功能。

新手建议直接从文档站的 从这里开始 阅读。

主题与预览

场景 优先看
个人博客 simple、hexo、nobelium、typography
文档 / 知识库 gitbook、claude、thoughtlite
作品集 / 个人品牌 opc、proxio、starter、landing
产品官网 starter、landing、commerce
图片 / 摄影 photo、plog、magzine
导航站 nav

本地开发

推荐使用 Node 22 和 Yarn 1。Node 20 已无法安装当前依赖(@ai-sdk/google 要求 Node >=22),部署平台也需要同步设置为 Node 22。

# 1. 使用 Node 22
nvm use || nvm install

# 2. 安装 Yarn
npm i -g yarn

# 3. 安装依赖
yarn

# 4. 启动开发
yarn dev

常用命令:

命令 用途
yarn dev 启动本地开发
yarn build 构建生产版本
yarn export 静态导出
yarn docs:site:dev 本地预览文档站
yarn docs:site:build 构建文档站

文档入口

自 2026 年起,NotionNext 使用仓库内 Markdown 文档作为主要教程来源,并发布为独立文档站。

内容 链接
在线文档站 notionnext.tangly1024.com
新手入口 从这里开始
场景模板 按目标选择模板
配置索引 全站功能与配置索引
主题说明 26 个主题说明
用户作品 Showcase:已上线站点欢迎提交作品
文档源码 docs/
旧版手册 docs.tangly1024.com

参与社区

NotionNext 主仓库由 GitHub 组织 notionnext-org 维护。欢迎提交问题、补充文档、贡献主题、修复代码或参与讨论。

内容 链接
参与社区 community-participate.md
5.0 愿景与路线图 VISION_ROADMAP.md
贡献指南 CONTRIBUTING.zh-CN.md
项目治理 GOVERNANCE.zh-CN.md
维护者 MAINTAINERS.md
行为准则 CODE_OF_CONDUCT.md
讨论区 GitHub Discussions

如果你在仓库转让前已克隆旧地址,建议更新远程仓库:

git remote set-url origin https://github.com/notionnext-org/NotionNext.git
git remote -v

技术栈

相关项目

致谢

感谢 Craig Hart 发起的 Nobelium 项目。

Craig Hart
Craig Hart

感谢每一位参与代码、主题、文档、Issue、Review 与发布维护的贡献者。

Contributors

使用声明

本项目为免费、公开资源,仅限个人学习和合法站点建设使用。禁止利用本项目发布非法内容或进行违法活动。

License

The MIT License.

Project Stars

GitHub stars GitHub forks

Live star-history charts are temporarily unavailable because GitHub now restricts historical stargazer data to repository owners and collaborators.

NotionNext (notionnext-org/NotionNext)

Searching Database…

这是什么?NotionNext 是一个基于 Next.js 和 Notion API 的开源建站系统:你继续在 Notion 里管理文章、分类、标签和菜单,它会把整个工作区发布成一个快速、可搜索的独立网站。
我本来就能把 Notion 页面公开分享,NotionNext 能多给我什么?公开的 Notion 页面只是一份文档。NotionNext 会把工作区变成一个真正的独立网站,拥有你自己的域名、SEO、sitemap、RSS、评论、数据统计、站内搜索和邮件订阅——是为长期运营设计的。
我怎么把第一个网站上线?复制官方的 NotionNext Notion 模板,把这个仓库 fork 到你的 GitHub 账号下,在 Vercel 上部署,再把你的 Notion 页面 ID 填进环境变量——README 说这是一条 20 分钟就能走完的路。
在本地运行或改代码需要装什么?需要 Node 22 和 Yarn 1。因为有一个依赖包要求 Node >=22,Node 20 已经装不上依赖了,你的部署平台也要设置成 Node 22。之后用 yarn dev 开发,yarn build 做生产构建,或者用 yarn export 生成静态站点。
如果我用这种方式建站,会不会被锁死在 Notion 上?不会。Notion 只负责内容,网站负责展示和分发,README 里也提到以后可以迁移到 Markdown 或其他系统。
我不是博主,还能用它做什么?内置的 26 套主题覆盖了博客、文档和知识库、作品集、产品官网、相册,以及导航或网址目录站——README 里为每种场景都推荐了相应的主题。
我应该先看哪几套主题?做博客可以从 simple、hexo、nobelium 或 typography 开始;文档和知识库用 gitbook、claude 或 thoughtlite。opc、proxio、starter 和 landing 适合作品集和产品官网,photo 和 plog 面向摄影,nav 用来搭导航目录站。你可以在 preview.tangly1024.com 在线预览和切换主题。
为什么不直接用 Markdown 文件写作,而要留在 Notion 里?这样你就不用换写作工具:文章、分类、标签、封面和菜单都留在 Notion 里,发布交给 NotionNext 处理。它源自 Craig Hart 的 Nobelium 项目,README 也把这一点列为它的起源。
除了 Vercel,它还能部署到别的地方吗?可以。Zeabur 和 Vercel 一起被列为部署目标,仓库在 CI 里会构建 Docker 镜像,yarn export 还能生成完全静态的构建结果,放到任何静态服务器上托管都行。
它集成了哪些第三方服务?README 里列了五套评论系统:Twikoo、Giscus、Gitalk、Cusdis 和 Utterances。依赖里还包括用于站内搜索的 Algolia、管理用户账号的 Clerk,以及 Supabase 和 Vercel Analytics。
Size
266.9 MB
Stars
11.9K
Age
5y
Commits · 90 Days