10分钟上线Notion网站：Next.js Notion Starter Kit全流程指南
项目地址: https://gitcode.com/gh_mirrors/ne/nextjs-notion-starter-kit 你是否曾想拥有一个个人网站却被技术门槛劝退？还在为内容管理系统（CMS）的复杂设置头疼？本文将带你使用Next.js Notion Starter Kit，通过Notion作为内容源，快速搭建专业网站。无需复杂编程知识，全程可视化操作，10分钟即可完成部署。
项目概览
Next.js Notion Starter Kit是一个开源项目，它将Notion的内容管理能力与Next.js的性能优势相结合，让任何人都能快速部署自己的网站。项目核心特性包括：
- 自动生成美观的页面布局，支持明暗两种模式切换
- 内置图片优化系统，提升加载速度
- 自动生成社交媒体预览图，增强分享效果
- 智能目录导航，提升长文阅读体验
- 响应式设计，完美适配各种设备
项目结构清晰，主要代码分布在以下目录：
- 页面组件：components/
- 核心逻辑：lib/
- 配置文件：site.config.ts
- 样式文件：styles/
部署前准备
在开始部署前，你需要准备以下内容：
- 一个公开的Notion页面作为网站内容源
- 安装Node.js（推荐版本≥16）
- Git工具
- Vercel账号（免费）
获取Notion页面ID
首先，你需要将Notion页面设置为公开。打开Notion页面，点击右上角的"分享"按钮，开启"公开访问"选项。然后复制页面链接，从中提取页面ID。
Notion页面链接格式通常为：https://www.notion.so/[页面标题]-[页面ID]
例如，从链接https://www.notion.so/My-Site-7875426197cf461698809def95960ebf中，页面ID是7875426197cf461698809def95960ebf。
快速部署步骤
1. 获取项目代码
使用以下命令克隆项目仓库：
git clone https://link.gitcode.com/i/3bfe57829a93c6f605533434828ac262.git
cd nextjs-notion-starter-kit
2. 配置网站信息
编辑site.config.ts文件，修改以下关键配置：
export default siteConfig({
// 将此处替换为你的Notion页面ID
rootNotionPageId: '7875426197cf461698809def95960ebf',
// 网站基本信息
name: '我的个人网站',
domain: 'your-domain.vercel.app',
author: '你的名字',
// 社交媒体账号（可选）
twitter: 'your-twitter',
github: 'your-github',
linkedin: 'your-linkedin',
})
3. 安装依赖并本地测试
执行以下命令安装依赖并启动本地开发服务器：
npm install
npm run dev
打开浏览器访问http://localhost:3000，你应该能看到从Notion页面生成的网站。
4. 部署到Vercel
- 将代码推送到GitHub/GitLab/Bitbucket仓库
- 登录Vercel账号，导入你的仓库
- Vercel会自动检测Next.js项目，点击"部署"即可
部署完成后，Vercel会为你分配一个临时域名，你也可以绑定自己的域名。
高级优化技巧
URL路径自定义
默认情况下，网站会根据Notion页面标题自动生成URL路径。如果你想自定义URL，可以在Notion数据库中添加"Slug"属性，设置自定义路径。
路径生成逻辑由lib/map-page-url.ts控制，你可以根据需要修改代码来自定义URL生成规则。
图片优化
项目默认启用图片预览功能，通过next/image组件优化图片加载。你可以在site.config.ts中调整相关设置：
// 启用/禁用图片预览
isPreviewImageSupportEnabled: true,
// 启用Redis缓存（需要额外配置Redis服务）
isRedisEnabled: false,
样式定制
你可以通过修改以下文件来自定义网站样式：
- styles/global.css：全局样式
- styles/notion.css：Notion内容样式
- components/：页面组件
例如，要隐藏特定Notion块，可以在styles/notion.css中添加：
.notion-block-260baa77f1e1428b97fb14ac99c7c385 {
display: none;
}
暗模式支持
项目内置了明暗两种模式切换功能，由lib/use-dark-mode.ts控制。用户可以通过页面底部的切换按钮手动切换模式，系统也会根据用户的系统设置自动选择合适的模式。
常见问题解决
Vercel部署后图片无法显示
如果部署到Vercel后图片无法正常显示，可能是因为启用了Vercel的部署保护功能。解决方法是：
- 登录Vercel控制台，进入项目设置
- 导航到"部署保护"选项卡
- 禁用"部署保护"功能
页面路径冲突
如果多个Notion页面生成了相同的URL路径，系统会报错。解决方法是：
- 在Notion数据库中为冲突页面添加"Slug"属性，设置唯一值
- 或者修改页面标题，确保生成的URL路径唯一
社交媒体预览图不显示
社交媒体预览图由pages/api/social-image.tsx生成。如果预览图不显示，请检查：
- Vercel部署保护是否已禁用
- 页面是否有足够的内容生成预览图
- 可以直接访问
/api/social-image?id=页面ID端点检查错误
结语
通过Next.js Notion Starter Kit，你可以在几分钟内搭建一个功能完善的网站，而无需编写复杂的代码。Notion作为内容管理系统，让你可以轻松编辑网站内容，而Next.js和Vercel则确保了网站的高性能和可靠性。
无论是个人博客、作品集还是小型企业网站，这个工具包都能满足你的需求。现在就动手尝试，打造属于你自己的网站吧！
如果你在使用过程中遇到任何问题，可以查阅项目的contributing.md文件，或提交issue寻求帮助。
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
