type
Post
status
Published
date
Jun 14, 2023
slug
summary
用next做一个项目吧！
tags
开发
category
技术分享
icon
password

next.js

学习next.js只要跟着官网的blog项目走就基本可以理解大致流程
Learn | Next.js
Production grade React applications that scale. The world’s leading companies use Next.js by Vercel to build pre-rendered applications, static websites, and more.
Learn | Next.js
https://nextjs.org/learn/foundations/about-nextjs?utm_source=next-site&utm_medium=homepage-cta&utm_campaign=home
Learn | Next.js

notionApi

首先需要通过获得秘钥，来调用notion api，下面官网的教程很详细
Start building with the Notion API
Connect Notion pages and databases to the tools you use every day, creating powerful workflows.
Start building with the Notion API
https://developers.notion.com/docs/create-a-notion-integration
Start building with the Notion API
对前端天然友好的sdk！直接查看文档就可以在项目中使用
notion-sdk-js
makenotion • Updated Aug 30, 2023
通过官方文档的api就可以在前端项目中使用sdk了
Start building with the Notion API
Connect Notion pages and databases to the tools you use every day, creating powerful workflows.
Start building with the Notion API
https://developers.notion.com/reference/post-database-query
Start building with the Notion API

在next.js项目中获取notionApi数据

在 lib文件夹中建一个js文件
在前端页面用这样使用

增量更新不重新部署

Data Fetching: Incremental Static Regeneration
Learn how to create or update static pages at runtime with Incremental Static Regeneration.
Data Fetching: Incremental Static Regeneration
https://nextjs.org/docs/pages/building-your-application/data-fetching/incremental-static-regeneration#self-hosting-isr
Data Fetching: Incremental Static Regeneration

本地环境变量调试

Configuring: Environment Variables
Learn to add and access environment variables in your Next.js application.
Configuring: Environment Variables
https://nextjs.org/docs/app/building-your-application/configuring/environment-variables
Configuring: Environment Variables

示例项目

psy-intro
yingwinwin • Updated Jul 18, 2023