架构
NextJs
React
React-noiton-x
Redis
如何部署
建议一健3连下面的项目。
GitHub - Mnxj/nextjs-notion-react-clover
# 目录介绍
nextjs-notion-react-clover
- components # 主要存放页面模块
- lib # 封装函数
- pages # 页面主入口
- api # 外部资源请求
- tags # tags detail
- public # static
- images
- media
- styles
- .env.example # key config
- .vercelignore # vercel config
- next.config.js # nextjs config
- site.config.ts # global variable config
notion 注册和配置
1、注册一个账号,用来存放文章
Notion - The all-in-one workspace for your notes, tasks, wikis, and databases.
2、按照红色框这种结构。 除了Articles和友链数据都是点**add a page**
3、Articles和友链数据。在页面的空白处输入 / 选择database
4、Articles需要改为gallery,同时记得设置一下参数展示顺序。点击table更换类型
参数即位每个文章需要展示的参数
notion Api注册
点击,选择view my integrations,
Start building with the Notion API
进入创建一个新的就可以。记住token
redis 注册
登陆
Upstash: Serverless Data for Redis and Kafka
redis操作-文档参考如下
创建一个redis数据库
记住node中 node-redis的链接方式。
LeadnCloud 注册
1、注册一个账号、进入控制台、创建一个应用,名字随便起。
2、如果看不到评论信息可以在数据库储存→结构化数据→创建一个class ‘Comment’,权限所有用户
3、在设置。应用凭证里面拿到AppID,AppKey
4、在设置 安全中心加入自己的域名
Vercel注册
Develop. Preview. Ship. For the best frontend teams - Vercel
1、Vercel是一个用来部署的服务器,点击选择github登陆后,选择new project,选择我们fork的项目。
2、把我们前面注册的一些token导入到这里
参数配置参考.env.example 主要是下面这几
# Optional (for notion)
#NOTION_ID=
# Optional (for redis)
#REDIS_HOST=
#REDIS_PORT
#REDIS_PASSWORD=
# Optional (for valine)
#APP_ID=
#APP_KEY=
部署成功
1、点击会进入一个详细页面
2、如果自己有注册域名可以同通过如下方式配置