Next.jsReact博客

notion-blog — Next.js 博客模板

作者 Utkarshn10

一个使用 Next.js 构建、以 Notion 数据库作为内容源的博客模板，通过 Notion 集成读取文章列表与正文。

打开源站下载源码 ZIP

看看你的网站会是什么样

浏览真实页面截图，比较内容排版与手机效果。点击下方缩略图切换，放大查看整页细节。

3 个预览视图
桌面端首页1 / 3
桌面端截图首屏预览

由服务器浏览器实际访问页面后截取。

全部页面与视图 3

截图用于了解视觉与布局，交互效果请以实际项目为准。

采集于 2026-10-03查看来源

值得关注的模板亮点

从已有项目资料中，快速了解它的特点。

01

以 Notion 数据库作为博客内容源，文章在 Notion 中撰写与维护

02

通过 Notion 集成 API 读取数据，需在 Notion 中把数据库连接给对应集成

03

使用两个环境变量分别保存 Notion 密钥与博客数据库 ID

04

提供集中的站点配置文件，可设置标题、描述、关键词、作者与站点 URL

模板详细介绍

该模板把 Notion 当作博客的 CMS：文章存放在 Notion 数据库中，页面通过 Notion 集成 API 读取这些内容并渲染成博客。仓库说明给出的使用流程分三步，先创建 Notion 集成并把目标数据库连接给该集成，再配置 Notion 密钥与博客数据库 ID 两个环境变量，最后在配置文件中填写站点标题、描述、关键词、作者和站点 URL。

模板基于 Next.js，仓库标签为博客类，演示站点部署在 Vercel 上。README 只覆盖了接入 Notion 与站点基础信息配置，未说明主题样式、路由结构、分页、分类或评论等扩展能力，这些需要查看源码确认。

Next.js博客

适合你的项目吗？

适用场景

  • 想用 Notion 记录和排版文章，同时对外提供独立博客页面
  • 需要一个基于 Next.js 的轻量博客起点，再自行扩展页面与样式
  • 把已有 Notion 数据库中的内容发布为可访问的网站

适合人群

  • 熟悉 Notion 基本操作、能创建集成的使用者
  • 能配置环境变量并部署 Next.js 项目的开发者
  • 希望内容与代码分离、在 Notion 中写作的个人博客作者

上手与定制指南

结合仓库当前版本的说明，按下面的资料检查内容、配置与运行要求。

  1. 1

    按 Notion 官方文档创建集成，并在目标数据库的 Connections 中连接该集成

  2. 2

    将集成密钥配置为 NEXT_PUBLIC_NOTION_KEY，将博客数据库 ID 配置为 NEXT_PUBLIC_NOTION_BLOG_ID

  3. 3

    在配置文件中填写 SITE_TITLE、SITE_DESCRIPTION、SITE_KEYWORDS、SITE_AUTHOR 与 SITE_URL

  4. 4

    仓库采用 Apache-2.0 许可，分发时需随附许可证并保留归属声明；演示图片等第三方素材需单独核对许可

查看仓库使用说明

授权与来源资料

使用条件与限制

免费使用 · 保留许可声明

本次收录的是公开仓库中采用 Apache-2.0 许可的免费版本；免费范围为该版本代码，不代表外部服务或第三方素材免费。

使用时需要遵守

  • 允许免费使用、修改、商用和分发；分发时需随附 Apache-2.0 许可证。
  • 修改过的文件需显著标明改动，并保留相关版权、专利、商标及归属声明。
  • 若原项目附有 NOTICE 文件，分发衍生作品时需保留其中适用的归属声明。
  • 许可包含适用的贡献者专利授权；发起许可所述专利诉讼会终止该专利授权，且不授予商标使用权。
  • 代码按现状提供；担保与责任限制以原许可证及适用法律为准。

额外费用与待核对事项

  • 使用该模板必须先在 Notion 创建集成，属于外部服务依赖，需自行注册 Notion 账号并完成集成配置。
  • 必须提供 Notion 集成密钥（API key）才能读取内容，密钥由使用者在 Notion 侧自行申请与保管。
  • 需配置 Notion 密钥环境变量，未配置则无法获取博客数据；该密钥会暴露在前端公开变量中。
  • 需提供 Notion 博客数据库 ID，内容源绑定到特定 Notion 数据库，无法脱离 Notion 独立运行。
  • 文章必须存放在 Notion 数据库中，内容管理依赖 Notion 平台，属于外部服务使用限制。
  • 演示图片、字体、图标及其他第三方素材需按各自许可核对，不能仅凭代码的 Apache-2.0 许可判断。
  • 域名、托管、数据库、支付或 AI 等外部服务可能另外收费。
查看原文依据

no-charge, royalty-free, irrevocable copyright license

许可证原文

Go to https://developers.notion.com/docs/create-a-notion-integration and create your integration

README 原文

Use your integration key as the NOTION_KEY

README 原文

NEXT_PUBLIC_NOTION_KEY = YOUR_NOTION_KEY

README 原文

NEXT_PUBLIC_NOTION_BLOG_ID = YOUR_BLOG_DB_ID

README 原文

Go to your notion database (where you will be storing all the blogs) and click on the 3 dots and the top right corner

README 原文
https://github.com/Utkarshn10/notion-blog/blob/main/LICENSEhttps://github.com/Utkarshn10/notion-blog/blob/main/README.md

DeepSeek 根据仓库许可证和 README 整理 ·2026-10-03。结果仅覆盖已读取资料，依赖、图片、字体及后续条款变更以各自原文为准。

项目核对记录与介绍依据

模板资料

来源平台
GitHub
资料与维护参考分
资料一般 · 72 / 100
技术栈
Next.js · React
网站类型
博客
这个分数如何计算

本站按许可资料（最高30分）、演示链接（12分）、预览图（10分）、Star数（15分）、记录的维护时间（15分）、描述完整度（8分）、功能记录（5分）和分类资料（5分）计算。它不是代码、安全或性能测试，也不是 Google 评分；有链接不代表已实测可用。

这个项目需要核对什么

记录的仓库更新时间
2024-10-09
截图检查日期
2026-10-03

已收录演示链接。请用你的内容与屏幕尺寸检查；有演示不代表表单、认证或支付已经可用。

目录记录的主要技术栈是 Next.js。请通过依赖清单和锁文件核对实际版本与托管要求。这些说明基于收录资料，不代表代码审计或部署实测。

查看具体选型方法 →

介绍的制作与核对状态

介绍由 AI 辅助整理目录与仓库资料。仓库作者不等于这篇介绍的审核者。

审核声明: [email protected] · 2026-10-04

查看当时使用的来源资料

SHA-256: 093f2f494e25ff86d1d6564cb38a631b4cd3977b319c596ab6d8fbc2bb83f0e0

2026-10-03T21:00:01.544Z

来源文件 / 仓库
## From Notion to Blog

Simple template for blogs using Notion as a CMS

<img width="1037" alt="Screenshot 2024-04-21 at 12 34 05 PM" src="https://github.com/Utkarshn10/notion-blog/assets/58587256/5ce68b10-c086-4db5-9c22-12be26a9af7b">

## How to use the boilerplate

### Step 1 - Create an integration via Notion 
- Go to https://developers.notion.com/docs/create-a-notion-integration and create your integration
- Go to your notion database (where you will be storing all the blogs) and click on the 3 dots and the top right corner
- In the menu go to "Connections" and click on "Connect to"
- Select your integration 

### Step 2 - Setting up the environment
- Use your integration key as the NOTION_KEY
- To get your Blog DB ID you can take a look at [this](https://developers.notion.com/reference/retrieve-a-database).
  
```
NEXT_PUBLIC_NOTION_KEY = YOUR_NOTION_KEY
NEXT_PUBLIC_NOTION_BLOG_ID = YOUR_BLOG_DB_ID
```

### Step 3 - Setting the config file 

```javascript
export const SITE_TITLE = ""
export const SITE_DESCRIPTION = ''
export const SITE_KEYWORDS = ''
export const SITE_AUTHOR = ''
export const SITE_URL = ''
```
反馈内容错误

看看同类模板

对比同技术栈与用途的模板，找到更适合的视觉与内容结构。

tailwind-nextjs-starter-blog

tailwind-nextjs-starter-blog

tailwind-nextjs-starter-blog 是一个面向个人技术博客的 Next.js 与 Tailwind CSS 启动模板，其 v2 版本基于 App Router 与 React Server Comp…

Next.js · 博客

Nextjs-tailwindcss-blog-template

Nextjs-tailwindcss-blog-template

⭐Build SEO optimized personal blog website with Next.js, Tailwind CSS and Contentlayer. If you want to learn t…

Next.js · 博客

Next-js-Blog-Boilerplate

Next-js-Blog-Boilerplate

Next-js-Blog-Boilerplate 是一套面向个人与技术博客的启动代码，基于 Next.js 12 与 Tailwind CSS 3 构建，同时集成了 TypeScript、ESLint、Prettier …

Next.js · 博客

nextjs-blog-theme

nextjs-blog-theme

nextjs-blog-theme 是 Netlify 团队维护的一个博客启动模板，基于 Next.js 15（Pages Router）和 Tailwind CSS 4.x 构建，设计由 Bejamas 机构完成。

Next.js · 博客

blog

blog

🚀 My personal blog made with Tailwind CSS and NextJS. Template from Timlrx. Feel free to fork, follow and use…

Next.js · 博客

tailnext

tailnext

Tailnext 是一个基于 Next.js 14 App Router 和 Tailwind CSS 的免费开源模板，由 onWidget 团队创建并维护。

Next.js · 博客