Next.js Notion 起步套件安装与使用教程

Next.js Notion 起步套件安装与使用教程

nextjs-notion-starter-kit Deploy your own Notion-powered website in minutes with Next.js and Vercel. 项目地址: https://gitcode.com/gh_mirrors/ne/nextjs-notion-starter-kit

本教程旨在引导您快速了解并运行 nextjs-notion-starter-kit，这是一个基于 Next.js 和 Notion API 的开源项目，由 transitive-bullshit 开发，用于帮助您在几分钟内搭建属于自己的 Notion 驱动的网站。

1. 项目目录结构及介绍

项目遵循了 Next.js 的标准结构，并融入了一些特定于该套件的定制文件：

• /components: 包含复用的 React 组件。
• /lib: 存放辅助函数或库。
• /pages: 页面组件存放地，定义了应用的路由和视图。
• /public: 公共静态资源，如 favicon 或不在 Next.js 构建过程中处理的图片。
• /styles: CSS 相关文件，包括自定义样式的 .css 文件，特别是 notion.css 用于调整 Notion 内容的显示。
• .editorconfig, .gitignore, .prettierrc, eslintrc.json: 代码风格和忽略文件设置。
• package.json: 项目依赖和脚本命令。
• site.config.ts: 项目的核心配置文件，包含与 Notion 集成的关键设定。
• readme.md: 项目说明文档。
• next.config.js: Next.js 特定的配置。

2. 项目启动文件介绍

主要关注以下几个关键脚本：

• npm run dev: 启动本地开发服务器，让您能够实时预览站点。
• npm run build: 构建生产环境版本，编译所有代码并优化。
• npm run export: 如果适用，导出静态站点内容。
• npm run deploy: 部署到 Vercel，确保已配置相应环境变量。

3. 项目的配置文件介绍

site.config.ts

这是项目的核心配置文件，允许您进行以下配置：

• rootNotionPageId: 指定您的 Notion 主页ID，从公开的Notion页面URL中提取得到。
• spaceId (可选): Notion工作区ID，用于高级功能，可通过开发者控制台查找。
• isPreviewImageSupportEnabled: 控制是否启用预览图像特性。
• isRedisEnabled: 是否使用Redis缓存以加速图片生成，需要外部Redis服务支持。
• minTableOfContentsItems: 表明在页面上显示目录所需的最小段落数量。

此外，还可以配置SEO元数据、社交分享图像、响应式布局相关设置以及是否开启各种高级特性如暗黑模式、快速搜索等。

重要提示：编辑 site.config.ts 前确保理解每个属性的作用，以确保正确集成您的Notion内容。

---

通过跟随上述步骤，您可以轻松启动并定制基于 Next.js 和 Notion 的个人网站或博客。记得在部署前仔细阅读项目的 README.md 文件，了解更多配置细节和部署至Vercel的具体要求。

nextjs-notion-starter-kit Deploy your own Notion-powered website in minutes with Next.js and Vercel. 项目地址: https://gitcode.com/gh_mirrors/ne/nextjs-notion-starter-kit