next的关键词收集，知道这些关键词是做什么的

type

status

date

slug

summary

事件类型

异步编程模式 ⏳

Promise链式调用：

async/await模式：

10. 组件生命周期概念 🔄

函数组件的"生命"：

生活比喻： 就像人的一生：出生 → 成长变化 → 死亡

关键词await

在 Next.js 中的常见用法

数据获取：Next.js 是一个 React 框架，常用于构建服务器端渲染（SSR）或静态生成（SSG）的网站。通常你会在 Next.js 的 getServerSideProps、getStaticProps 或 API 路由中使用 await 来获取数据。

示例 1：在 `getServerSideProps` 中使用 `await`

在这个例子中，await 等待从 API 获取数据 (fetch 返回的 Promise)，一旦数据获取完成，它会返回 json 格式的数据。

示例 2：在 API 路由中使用 `await`

在 Next.js 的 API 路由中，await 通常用来处理异步操作，比如从数据库获取数据、调用外部 API 等。

`await` 的作用是什么？

暂停执行，直到异步操作完成：当你在异步函数内部使用 await，它会暂停该函数的执行，直到所等待的 Promise 解决（即成功或失败）。

简化异步代码：相比传统的回调函数或 then 链式调用，await 使代码更具可读性和可维护性。

为什么在 Next.js 中使用 `await`？

异步数据获取：在 SSR、SSG 或 API 请求中，通常需要等待外部数据源（如 API、数据库）的响应，这些操作通常是异步的。

简化代码：相比回调函数、Promise 的 then()，await 能让异步代码写得更像同步代码，逻辑更加直观。

总结

在 Next.js 项目中，await 用来等待异步操作的完成，主要用在数据获取和异步逻辑中，使得代码易于理解和维护。你会在如 getServerSideProps、getStaticProps、API 路由等地方频繁使用 await 来处理异步任务。

关键词`getServerSideProps`

getServerSideProps 是 Next.js 提供的一个特殊函数，用于在 服务器端 渲染页面时 获取数据。它允许你在每次请求时，动态获取数据并将其传递给页面组件，用于 服务端渲染（SSR）。

主要特点：

服务器端渲染（SSR）：getServerSideProps 运行在服务器上，页面每次请求都会触发一次数据获取操作。不同于客户端渲染，它在服务器获取数据并生成 HTML，然后将渲染好的页面返回给浏览器。

每次请求执行：当用户访问页面时，服务器会执行 getServerSideProps 函数，获取最新数据并将其传递给页面组件。

返回数据作为 props：getServerSideProps 返回的数据会被作为 props 传递给页面组件，让你可以在页面中使用获取的数据。

语法和用法

示例 1：基本使用

详细解读：

export async function getServerSideProps(context):

这是一个 异步函数，Next.js 在每次请求时会调用它，用来获取服务器端的数据。
context 是传递给 getServerSideProps 的上下文对象，里面包含一些请求相关的信息（例如请求参数、headers 等）。

获取数据:

你可以在 getServerSideProps 中使用 fetch、数据库查询等方法来获取数据。因为它是服务器端执行的，所以你可以安全地使用 API 密钥或数据库查询。

返回 props:

函数返回的对象中的 props 会传递给页面组件。在上面的例子中，data 会作为 props 传递给 MyPage 组件。

示例 2：使用请求参数

context.query 包含请求的 URL 查询参数。在这个例子中，页面会根据 URL 中的 id 参数获取相应的数据。

`getServerSideProps` 的使用场景

动态数据：需要从 API、数据库等地方获取 每次请求更新 的数据。例如：新闻详情页、用户个性化内容、实时数据等。

SEO 友好：因为它是在服务器上渲染的，搜索引擎可以更好地抓取页面内容，因此对 SEO 有利。

权限验证：在 getServerSideProps 中，你可以进行用户身份验证，根据用户的权限来返回不同的数据。

`getServerSideProps` 的注意事项

只能用于页面级别：getServerSideProps 只能在页面组件中使用，不能在普通的 React 组件中使用。

性能影响：每次请求都会触发数据获取，因此如果数据获取过程较慢，会影响页面加载时间。需要在一些性能敏感的地方谨慎使用。

无法在客户端使用：getServerSideProps 只能在服务器端运行，无法在客户端（如浏览器）中调用。

总结

getServerSideProps 是 Next.js 用于 服务器端渲染 的一个工具，允许你在请求时动态获取数据并传递给页面组件。它在每个页面请求时运行，因此非常适合那些需要最新数据、动态生成内容的场景。

关键词`getStaticProps`

getStaticProps 是 Next.js 提供的一个特殊函数，用于在 构建时 （也叫做 静态生成）获取数据。与 getServerSideProps 不同，getStaticProps 只会在 构建时执行一次，生成的页面在构建后会变成静态文件，能够高效地服务于用户请求。

主要特点：

静态生成：getStaticProps 在构建时运行，获取数据并生成静态页面，适用于 不需要频繁更新 的内容，比如博客文章、产品展示页面等。

提升性能：静态生成的页面在访问时不需要重新请求服务器，直接从 CDN 或服务器读取预生成的 HTML 页面，因此性能极高。

可结合 ISR（增量静态生成）：通过设置 revalidate 参数，Next.js 可以在后台 定期重新生成页面，这允许你在静态生成的基础上添加一定的动态性。

语法和用法

示例 1：基本使用

详细解读：

export async function getStaticProps():

这是一个 异步函数，Next.js 会在构建时调用它，用来获取静态生成页面所需要的数据。
你可以在这个函数中调用 API、数据库或者本地文件，获取数据并将其传递给页面组件。

返回 props:

函数返回的对象中包含 props 字段，页面组件会使用这些 props 来渲染页面。在上面的例子中，data 会被作为 props 传递给 MyPage 组件。

一次性执行:

该函数仅在项目 构建时 执行一次，生成静态的 HTML 文件。用户访问这个页面时，Next.js 会直接返回静态 HTML，而不需要再重新执行数据请求。

示例 2：带有 `revalidate`（增量静态生成）

revalidate：revalidate 是用于设置页面重新生成的间隔时间（以秒为单位）。在这个例子中，页面会每隔 10 秒在后台重新生成一次，用户访问的页面将会是最新的静态生成结果。这种机制称为 增量静态生成（ISR）。

`getStaticProps` 的使用场景

不需要频繁更新的数据：适合那些数据更新频率较低的页面，比如博客文章、文档、产品列表等。这些页面可以在构建时生成静态内容，提升性能。

提升 SEO：静态生成的页面会生成完整的 HTML，因此对搜索引擎非常友好，帮助提升页面的 SEO 排名。

高性能要求：因为页面是静态的，用户请求时不需要重新生成页面或从数据库获取数据，因此响应速度非常快，尤其是在配合 CDN 的情况下。

增量静态生成（ISR）：你可以通过 revalidate 参数让页面在后台自动重新生成，达到“半动态”效果，非常适合内容定期更新但又希望保持高性能的场景。

`getStaticProps` 与 `getServerSideProps` 的区别

特性	`getStaticProps`	`getServerSideProps`
执行时机	构建时执行	每次请求时执行
页面类型	静态页面	动态页面
性能	最高性能（生成静态 HTML）	性能较低（每次请求重新生成页面）
适用场景	数据更新频率低，页面可以静态化	需要实时数据或个性化内容
SEO	非常有利	也有利于 SEO，但比静态稍慢

`getStaticProps` 的注意事项

只能在页面级别使用：getStaticProps 只能在页面组件中使用，不能在普通的 React 组件中使用。

适用于静态内容：它适合那些 在构建时 就能确定的数据。对于实时数据，getServerSideProps 或客户端获取数据（CSR）更适合。

定期再生页面：通过设置 revalidate，你可以在后台定期重新生成静态页面，避免过时的数据。

总结

getStaticProps 是 Next.js 的一种 静态生成 数据获取方式，用于在构建时获取数据，并生成静态页面。它能大幅提升页面的性能，并且对 SEO 友好。通过结合 revalidate，可以实现 增量静态生成，让静态页面也能够动态更新。

关键词 promise

在 Next.js 项目中，Promise 是 JavaScript 原生的一种异步编程工具，它用于处理异步操作，例如网络请求、数据库查询或其他需要时间完成的任务。Promise 允许你在代码中处理异步任务时避免“回调地狱”（嵌套的回调函数），并提供一种更加直观的处理异步流程的方式。

基本概念

Promise 代表的是一个尚未完成的任务，将来可能会返回一个值（成功）或抛出一个错误（失败）。

Promise 有三种状态：

Pending（进行中）：Promise 的初始状态，任务尚未完成。

Fulfilled（已成功）：任务成功完成，并返回了结果。

Rejected（已失败）：任务失败，并返回了错误。

Promise 语法

创建一个 Promise 的基本结构如下：

resolve：成功时调用，用于返回成功结果。

reject：失败时调用，用于返回错误。

示例：在 Next.js 项目中使用 `Promise`

1. 基本示例：模拟异步任务

2. 使用 `fetch` 进行 API 调用

在 Next.js 项目中，Promise 常用于处理 fetch 请求（因为 fetch 是基于 Promise 的）。例如，你可以在 getStaticProps 或 getServerSideProps 中发起网络请求获取数据：

在这里，fetch 是一个 Promise，它可以通过 await 来等待完成。当 Promise 成功时，它会返回 API 的数据；如果失败，错误将被抛出并进入 catch 块。

3. 使用 `async` 和 `await`

在现代 JavaScript 中，async/await 是一种更简单的方式来处理 Promise。async 用于声明一个异步函数，而 await 用来等待 Promise 的结果。

例如，以上的 fetchData 函数可以改写为使用 async/await：

在 Next.js 中的使用场景

API 请求：获取后端数据时，通常通过 Promise 处理异步请求（如 fetch 或 axios）。

文件读取：当从文件系统中读取数据时（例如在 getStaticProps 中读取本地文件），也可以使用 Promise 来处理异步文件操作。

数据库查询：与数据库交互时，查询操作通常是异步的，因此也会返回 Promise。

总结

Promise 是一种处理异步操作的机制，避免了复杂的回调嵌套。

在 Next.js 中，Promise 主要用于处理诸如 API 请求、文件读取、数据库查询等异步任务。

通过 async/await，你可以用更简洁的方式处理 Promise，提高代码的可读性。

Promise 是 JavaScript 异步编程的基础，特别是在像 Next.js 这样的现代框架中，它帮助管理复杂的异步逻辑。

关键词async

在 Next.js 项目中，async 是 JavaScript 用于定义 异步函数 的关键字。它允许你编写异步代码，并使代码看起来像是同步执行的。与之配合的 await 关键字，可以让你等待异步操作的完成，简化了 Promise 的使用。

`async` 基本概念

async 关键字用来声明一个异步函数，它会返回一个 Promise。即使函数内部看起来像是返回一个普通的值，实际上这个值会自动被包装成一个 Promise 对象。

在上面的例子中，尽管 myFunction 返回的是一个字符串 "Hello, Next.js!"，但由于它是一个异步函数，所以实际上返回了一个 Promise 对象。

`await` 关键字

await 是专门与 async 配合使用的。它用来暂停代码的执行，直到 Promise 完成，然后返回 Promise 的结果。只有在 async 函数内部才能使用 await。

`async` 和 `await` 的工作原理

async 函数：是一个返回 Promise 的函数。无论函数内部返回什么，最终它都会被封装在一个 Promise 中。

await 关键字：可以暂停函数的执行，直到 Promise 完成。它会返回 Promise 的解析结果，而不是 Promise 本身。

在 Next.js 中的使用场景

1. 数据获取（如在 `getStaticProps` 或 `getServerSideProps` 中）

async 和 await 在 Next.js 中非常常见，特别是在数据获取的场景中。比如在 getStaticProps 或 getServerSideProps 中，你通常需要从 API 或数据库中获取数据，这些操作是异步的，因此 async 是必须的。

在这个例子中，getStaticProps 是一个异步函数，它通过 await 等待 fetch 完成，并返回获取到的数据作为页面的 props。

2. API 路由中的异步操作

在 Next.js 中，你可以通过 pages/api 目录创建 API 路由。这些路由可以处理异步任务，比如查询数据库或处理外部 API 请求，通常会用到 async。

3. 异步事件处理

在组件内，也可以使用 async 函数来处理用户的交互事件。比如表单提交、按钮点击等操作可能需要发起异步请求，通常会用 async 来处理。

优点

可读性强：async/await 让异步代码看起来像是同步执行的，避免了繁杂的回调嵌套。

处理错误更加简便：可以通过 try/catch 来捕获 Promise 的错误，比 Promise 链中的 .catch 更直观。

总结

async：定义一个异步函数，返回一个 Promise。

await：暂停函数执行，等待异步操作完成，返回 Promise 的解析结果。

在 Next.js 中，async/await 常用于 获取数据、处理 API 请求、事件处理 等异步操作。

使用 async/await，可以让你的代码更加简洁、清晰，并且处理异步操作时更加直观。

关键词 fetch

在 Next.js 项目中，fetch 是一个原生的 JavaScript 函数，用于发起 HTTP 请求，通常用于从外部 API 或服务器获取数据。fetch 是基于 Promise 的，这意味着它是异步的，可以使用 async/await 来处理异步任务。fetch 是前端和后端通用的，因为 Next.js 既支持客户端渲染，也支持服务端渲染。

基本用法

fetch 可以发起 GET、POST、PUT、DELETE 等 HTTP 请求，典型的用法如下：

上面的代码发起了一个 GET 请求，成功后返回的数据被解析为 JSON，然后打印到控制台。fetch 的请求和响应都是基于 Promise 的，因此可以使用 .then() 和 .catch() 来处理结果和错误。

使用 `async/await`

为了让代码更简洁且易于阅读，async/await 常用于替代 .then() 的方式：

在 Next.js 中的使用场景

1. 在 `getStaticProps` 中使用 `fetch`

fetch 在 Next.js 的 静态生成（Static Generation）中经常用于从 API 或数据库获取数据。

在 getStaticProps 中，fetch 用于在构建时获取数据，返回的 props 将在页面上渲染。

2. 在 `getServerSideProps` 中使用 `fetch`

fetch 也可以在 服务器端渲染（Server-Side Rendering）中使用，特别是在 getServerSideProps 中。

在这个例子中，fetch 在服务器端被调用，页面每次请求都会重新获取数据。

3. 在客户端组件中使用 `fetch`

除了在服务器端，fetch 也可以在客户端组件中使用。比如在一个按钮点击事件中触发数据请求：

`fetch` 的配置选项

fetch 允许你配置不同的请求方式、请求头、请求体等参数。常见的选项有：

返回值解析

fetch 的返回值是一个 Response 对象，它需要解析为可读格式，比如 JSON、文本等。

JSON 格式：response.json() 返回一个解析后的 JSON 对象。

文本格式：response.text() 返回纯文本内容。

其他格式：可以通过 response.blob()、response.arrayBuffer() 等获取不同格式的数据。

错误处理

fetch 只会在网络错误或无法完成请求时触发错误，但不会自动抛出 HTTP 状态码 4xx 或 5xx 的错误。因此，你需要手动检查 response.ok 或 response.status：

总结

fetch 是用于发起 HTTP 请求的原生函数，返回的是一个 Promise。

在 Next.js 中，fetch 可以在客户端和服务器端使用，常用于获取外部 API 或服务器端的数据。

你可以结合 async/await 来使代码更简洁，并通过不同的配置来定制请求行为。

💡

有关Notion安装或者使用上的问题，欢迎您在底部评论区留言，一起交流~

async/await - 排队等待系统 ⏳

生活比喻： 就像去银行办事，你需要排队等待：

async = 告诉银行"我要办的事可能需要等待"

await = "我在这里等，办完了再继续"

实际场景：

从服务器获取数据（等待响应）

上传文件（等待上传完成）

用户登录验证（等待服务器确认）

fetch - 信息获取员 📡

生活比喻： 就像派一个人去别的地方取东西：

你说"去隔壁店买包烟"

这个人就去了，你可以继续做别的事

他回来后告诉你结果（成功买到或店铺关门了）

实际用途：

从API获取数据

提交表单数据

下载文件

Promise - 承诺书 📜

生活比喻： 就像朋友给你写的承诺书：

"我承诺明天给你还钱"

可能的结果：真的还钱了 ✅ 或者没还成功 ❌

你可以决定还钱后做什么，没还成功后做什么

三种状态：

等待中（还没到明天）

成功了（钱还了）

失败了（没还成功）

children - 包装盒里的东西 📦

生活比喻： 就像一个包装盒，你可以往里面放任何东西：

礼品盒里可以放手表、项链、或者糖果

书包里可以放书本、文具、或者零食

盒子本身不关心里面装什么

实际用途：

布局组件包装内容

模态框包装弹出内容

卡片组件包装显示内容

Provider - 供应商/配送中心 🏪

生活比喻： 就像一个大型配送中心：

统一管理所有商品（数据）

向所有下级店铺（组件）配送商品

店铺不需要知道商品从哪来，只管使用

实际用途：

提供用户登录信息给全站

提供主题设置给所有页面

提供购物车数据给相关组件

prop - 传话筒/信息传递 📞

生活比喻： 就像父母给孩子的指令和物品：

父母说"这是今天的零花钱"（传递数据）

父母说"完成作业后告诉我"（传递函数）

孩子只能收到，不能修改父母给的东西

Middleware - 门卫系统 🛡️

生活比喻： 就像小区的门卫：

检查每个进入的人（检查每个请求）

验证门禁卡（验证权限）

决定是否放行或者重定向到登记处

实际用途：

用户身份验证

访问权限控制

请求重定向

日志记录

getServerSideProps - 服务器准备数据 🍳

生活比喻： 就像餐厅的备菜过程：

客人点菜后，厨房先准备所有食材

食材准备好了，才开始炒菜

炒好了直接端给客人

什么时候用：

需要最新数据的页面

根据用户身份显示不同内容

SEO很重要的页面

getStaticProps - 预制菜系统 🥘

生活比喻： 就像便利店的预制菜：

提前做好放在冰箱里

客人要的时候直接加热

比现做要快得多

什么时候用：

内容不经常变化

访问量很大的页面

想要最快的加载速度

Head - 网页身份证 🆔

生活比喻： 就像给每个房间贴标签：

房间名称（页面标题）

房间用途（页面描述）

特殊说明（SEO信息）

Image优化 - 智能相册 📸

生活比喻： 就像智能相册：

自动调整照片尺寸适应相框

远处的照片先显示模糊版本

需要看时才加载高清版本

Layout - 房屋框架 🏠

生活比喻： 就像房子的基本结构：

固定的墙壁、门窗（导航栏、页脚）

可变的室内装修（页面内容）

每个房间都有相同的基础设施

App Directory - 新的房屋设计 🏗️

Next.js 13+的新特性： 就像从平房升级到智能别墅：

更灵活的房间布局

更先进的控制系统

更好的性能表现

API Routes - 后端接口 🔌

生活比喻： 就像酒店的客房服务：

客人打电话要毛巾（发送请求）

服务员送毛巾到房间（处理请求并返回）

不用客人自己去仓库拿

文件位置：

/pages/api/users.js = 处理用户相关请求

/pages/api/products/[id].js = 处理特定商品请求

Dynamic Routes - 动态路由 🎭

生活比喻： 就像一个万能模板：

同一个房间设计，可以给张三、李四、王五使用

房间布局一样，但里面的个人物品不同

[id].js 就是这个万能模板，id是住户编号

实际例子：

/products/1 - 商品1的页面

/products/2 - 商品2的页面

/users/john - 用户john的个人页面

function - 功能机器/工具 🔧

生活比喻： 就像一台专门做某件事的机器：

咖啡机：放入咖啡豆 → 制作 → 输出咖啡

洗衣机：放入脏衣服 → 清洗 → 输出干净衣服

计算器：输入数字 → 计算 → 输出结果

实际用途：

处理用户点击

计算价格

验证表单

发送数据到服务器

return - 交付成果 📦

生活比喻： 就像工厂的最终产品输出：

面包工厂最后要 return 面包

汽车工厂最后要 return 汽车

不 return 就等于白忙活

在React中：

组件必须 return 要显示的内容

函数要 return 处理结果

API要 return 响应数据

const - 保险箱/不变的标签 🔒

生活比喻： 就像给东西贴上"不可更改"的标签：

你的身份证号码（不会变）

你家的地址（搬家前不会变）

今天的日期（过了就不会变）

什么时候用：

存储不会改变的值

存储函数组件

存储配置信息

import - 进货/引入 📥

生活比喻： 就像商店进货：

从工厂进货到店里卖

从其他城市引入特产

从图书馆借书到家里看

实际用途：

引入React功能

引入其他组件

引入工具函数

引入样式文件

export - 出货/分享 📤

生活比喻： 就像工厂把产品卖给其他人：

把做好的蛋糕分享给顾客

把写好的文章发表让别人看

把发明的工具给别人使用

let - 可变标签 🏷️

生活比喻： 就像可以重新贴的便签纸：

今天写"买牛奶"，明天可以改成"买面包"

比const更灵活，值可以改变

if/else - 选择器/决策器 🤔

生活比喻： 就像人生的选择：

如果下雨，就带伞

如果没下雨，就不带伞

如果有钱，就买贵的

否则，就买便宜的

map - 流水线加工 🏭

生活比喻： 就像工厂流水线：

把一堆苹果都削皮

把一群学生都发成绩单

把所有商品都加上价格标签

filter - 筛选器 🔍

生活比喻： 就像筛子筛面粉：

筛掉大颗粒，留下细面粉

筛选出及格的学生

过滤出符合条件的商品

forEach - 挨个处理 📋

生活比喻： 就像老师点名：

挨个叫学生名字

对每个学生都做同样的事

一个都不能漏

find - 寻找器 🔎

生活比喻： 就像在人群中找特定的人：

找到第一个穿红衣服的人就停止

找到符合条件的就返回

找不到就返回空

default - 默认出口 🚪

生活比喻： 就像建筑物的主门：

一般人都走主门进出

也可以有侧门，但主门是默认的

在Next.js中：

每个页面组件需要 default export

主要的功能用 default，辅助功能用 named export

router - 导航员 🧭

生活比喻： 就像GPS导航：

知道你现在在哪里

帮你跳转到想去的地方

记录你走过的路径

push/replace - 前进方式 🚶‍♂️

生活比喻：

push：走楼梯上楼，可以原路返回

replace：坐电梯换楼层，忘记之前在哪

query - 问询台 ❓

生活比喻： 就像机场的问询台：

乘客问"我的航班在哪个登机口？"

网址问"这个页面需要什么参数？"

params - 身份证明 🆔

生活比喻： 就像进入会员专区需要的会员卡号：

显示你的身份和权限

告诉系统该显示什么内容

json - 通用语言 🌐

生活比喻： 就像国际通用的英语：

不同国家的人都能理解

电脑和网站之间交流的标准语言

status - 状态报告 📄

生活比喻： 就像医院的检查报告：

200 = 健康正常

404 = 找不到

500 = 服务器生病了

className - 服装标签 👔

生活比喻： 就像衣服的款式标签：

"正装"、"运动装"、"休闲装"

告诉系统要穿什么样的"衣服"

style - 个人定制 ✨

生活比喻： 就像量身定制的衣服：

专门为你一个人设计

只有你穿这一套

onClick - 按钮响应 👆

生活比喻： 就像门铃：

有人按门铃，你就知道有客人来了

用户点击按钮，程序就知道要做什么

onChange - 变化监听器 👂

生活比喻： 就像温度感应器：

温度一变化就立即知道

用户一输入就立即响应

req/res - 问答对话 💬

生活比喻： 就像客服对话：

req (request)：客户的问题

res (response)：客服的回答

method - 沟通方式 📞

生活比喻： 就像不同的联系方式：

GET：打电话询问信息

POST：寄信件递交申请

PUT：上门更新资料

DELETE：通知取消服务

body - 包裹内容 📦

生活比喻： 就像快递包裹里面装的东西：

外面是包装盒（headers）

里面是真正的商品（body）

headers - 包裹标签 🏷️

生活比喻： 就像快递包裹上的标签：

收件人地址

寄件人信息

包裹类型

优先级

component - 零件/积木 🧩

生活比喻： 就像乐高积木：

可以重复使用

组合成更大的作品

坏了可以单独更换

hook - 挂钩/工具 🪝

生活比喻： 就像工具箱里的各种工具：

扳手、螺丝刀、锤子

每个工具有特定用途

需要时就拿出来用

state - 当前状态 📊

生活比喻： 就像房间的当前情况：

灯是开还是关

窗户是开还是关

温度是多少度

props - 传递的物品 🎁

生活比喻： 就像父母给孩子的东西：

零花钱（数据）

指令（函数）

工具（组件）

学习建议 📚

第一优先级（每天都用）：

function, return, const, import, export

if/else, map, onClick, className

default, router, json

第二优先级（经常用）：

async/await, fetch, useState, useEffect

req/res, method, status, loading

component, props, state

第三优先级（高级功能）：

middleware, getServerSideProps, getStaticProps

params, query, headers, body

各种高级 hooks 和优化概念

就像学语言一样，先掌握常用词汇，再逐步扩展词汇量，循序渐进最有效！

🏭关于函数

React 常用工厂函数 🛠️

1. createContext - 信息广播站工厂

作用：制造一个可以在组件间共享信息的"广播电台" 2. useState - 记忆盒子工厂

作用：制造一个能记住数据并且能改变数据的"记忆盒子" 3. useRef - 遥控器工厂

作用： 制造一个能直接控制DOM元素的"万能遥控器" 4. useCallback - 工具保存箱工厂

作用： 制造一个能保存函数不让它重复创建的"工具箱" 5. useMemo - 智能缓存工厂

作用：制造一个能缓存计算结果的"智能助手" Next.js 特有工厂函数 🎯

1. useRouter - 导航员工厂

作用： 制造一个专门负责页面跳转的"导航员" 2. dynamic - 懒加载工厂

作用： 制造一个"需要时才加载"的组件 3. getServerSideProps - 服务器数据工厂

作用： 制造一个在服务器端准备数据的"备菜员"

其他库的常用工厂函数 📚

Axios (HTTP请求库)

Styled-components (样式库)

Redux Toolkit (状态管理)

什么是工厂函数？ 🏭

生活比喻： 工厂函数就像各种专门的工厂，就是可以生产出大量的：

汽车工厂：给你材料和要求 → 输出一辆汽车

面包工厂：给你面粉和配方 → 输出面包

手机工厂：给你零件和设计 → 输出手机

特点：

调用它们就能"制造"出特定的东西

通常返回对象、组件或特殊功能

名字通常以 "create"、"make"、"build" 开头

工厂函数的技巧📚（这些都需要导入）

1. 名字特征：

create... (createContext, createElement)

use... (useState, useEffect) - React Hooks都是工厂函数

make... (makeStyles)

build... (buildQuery)

2. 行为特征：

调用后返回新的对象或功能

通常用于初始化或创建实例

经常在组件顶部或变量声明中使用

3. 使用模式：

实际开发建议 💡

记住这个公式：

开发流程：

想要某个功能 → 2. 查文档找对应的工厂函数 → 3. import → 4. 调用创建 → 5. 使用

就像要用电钻，先去工具店买（import），再制造出专属的电钻实例（调用工厂函数），最后用它钻洞（使用）！

工厂函数 vs 普通函数 🤔

工厂函数特征：

普通函数特征：

import 规则总结 📋

需要 import 的：

不需要 import 的：

🧠定义 = 给东西起名字 + 设定规则

变量定义 = 给盒子贴可换标签

常量定义 = 给盒子贴永久标签

函数定义 = 写操作说明书

对象定义 = 这个东西的一些名字，属性，和属性值

方法定义 = 给对象添加技能

类定义 = 制作生产模板

组件定义 = 制作UI零件

类型定义 = 制定标准规范

就像生活中给各种东西分类标记一样，编程中的"定义"就是给代码中的各种元素起名字和设定使用规则！

🏷️变量定义 - 可变的标签

let - 可更换的便签纸

生活比喻： 就像衣柜上的便签纸，今天写"夏装"，换季时可以改成"冬装"

什么时候用：

会变化的数据（计数器、用户输入、临时状态）

循环中的计数变量

条件判断中可能改变的值

🔒常量定义 - 永久标签

const - 不可更改的铭牌

生活比喻： 就像刻在石头上的碑文，一旦刻好就不能改了

什么时候用：

不会变的配置信息

固定的网址、密钥

数学常数

函数组件（React）

📖函数定义 - 制作说明书

传统函数定义

生活比喻： 就像写菜谱：

函数名 = 菜名

参数 = 需要的食材

函数体 = 制作步骤

return = 最终的菜品

箭头函数定义

生活比喻：

就像简化版菜谱，更简洁的写法

简短箭头函数

生活比喻：

就像计算器，输入两个数字直接得出结果

🎭方法定义 - 对象的技能

对象内的方法

生活比喻： 就像人的技能清单：

对象 = 一个人

属性 = 人的基本信息（姓名、年龄）

方法 = 人会做的事情（自我介绍、走路、跑步）

🏗️类定义 - 制造模板

ES6 类定义

生活比喻： 就像汽车工厂的生产图纸：

类 = 图纸模板

constructor = 组装说明

方法 = 汽车的功能

实例 = 根据图纸造出的具体汽车

⚛️React 组件定义

函数组件定义

生活比喻： 就像制作标准化的零件：

组件 = 可重复使用的零件

props = 零件的规格参数

return = 最终的零件样子

带状态的组件定义

📦对象定义 - 信息包装盒

简单对象定义

复杂对象定义

生活比喻： 就像整理收纳盒：

对象 = 大的收纳盒

属性 = 盒子里的不同小格子

值 = 放在格子里的东西

📝数组定义 - 排队列表

简单数组定义

对象数组定义

生活比喻： 就像排队的名单：

数组 = 整个队伍

元素 = 队伍中的每个人

索引 = 排队的位置号码

🏷️TypeScript 类型定义

接口定义 (interface)

类型别名定义 (type)

生活比喻： 就像制定标准规范：

interface/type = 标准模板

属性 = 必须包含的信息

可选属性 = 非必需的信息

📊定义的分类总结

按用途分类：

存储数据的定义：

let - 可变数据

const - 不变数据

对象定义 - 结构化数据

数组定义 - 列表数据

执行操作的定义：

function - 可重复的操作

方法定义 - 对象的操作

类方法 - 类的操作

创建模板的定义：

类定义 - 创建对象的模板

组件定义 - 创建UI的模板

interface/type - 数据结构的模板

配置规则的定义：

TypeScript类型 - 数据格式规则

对象结构 - 数据组织规则

包含关系层次图 🎯

从大到小的包含关系：

具体的包含关系示例 📦

类定义 - 大型工厂 🏭

就像一个完整的汽车工厂，里面什么都有：

包含关系：

类里面有：变量 + 常量 + 方法 + 构造函数

方法里面有：变量 + 常量 + 对象 + 函数

组件定义 - 智能房间 🏠

就像一个智能家居房间，集成了各种功能：

包含关系：

组件里面有：变量(state) + 常量 + 函数 + 其他组件 + 类型定义

函数里面有：变量 + 常量

函数定义 - 专业厨师 👨‍🍳

就像一个厨师做菜的完整流程：

包含关系：

函数里面有：变量 + 常量 + 对象 + 嵌套函数

对象定义 - 个人档案袋 📋

就像一个人的完整档案：

包含关系：

对象里面有：属性(变量/常量) + 方法 + 嵌套对象

实际开发中的嵌套案例 🎨

React 应用的完整结构：

包含关系规律总结 📈

容器型定义（可以包含很多其他定义）：

类定义 - 最大的容器，几乎可以包含一切

组件定义 - UI容器，可以包含状态、函数、其他组件

函数定义 - 逻辑容器，可以包含变量、常量、对象、嵌套函数

对象定义 - 数据容器，可以包含属性、方法、嵌套对象

基础型定义（通常被包含）：

变量定义 - 基础存储，被其他定义包含

常量定义 - 基础存储，被其他定义包含

类型定义 - 约束规范，为其他定义服务

记忆公式：

就像搭积木一样，大积木里面可以放小积木，形成复杂而有序的结构！这种包含关系让代码既有组织性，又有复用性。Retry

方法分类详解 📚

1. JavaScript 原生方法（不需要import，任何地方都能用）

数学方法：

字符串方法：

数组方法：

控制台方法：

2. 浏览器API方法（浏览器环境自带，不需要import）

事件对象方法：

DOM操作方法：

网络请求方法：

本地存储方法：

定时器方法：

口诀：

点出来的 = 对象的方法（事件.preventDefault()）

括号前有点的 = 通常是对象方法

直接调用的 = 全局方法（console.log(), setTimeout()）

需要import的 = 外部库方法

实战代码解读

逐行详细解读 🔍

第1行：函数定义 + 参数解构 + TypeScript类型

知识点应用：

函数定义 ✅ - function ThemeProvider

参数解构 ✅ - { children } 从参数对象中取出children

TypeScript类型定义 ✅ - : { children: React.ReactNode }

生活比喻： 就像定义一个"礼品包装师"的工作：

函数名 = 职业名称（ThemeProvider = 主题提供商）

参数解构 = 从工具箱里直接取出需要的工具（children）

TypeScript类型 = 工作规范（children必须是React组件类型）

等价于更简单的写法：

第2行：useState Hook（变量定义）

知识点应用：

常量定义 ✅ - const

数组解构 ✅ - [theme, setTheme]

useState工厂函数 ✅ - 创建状态管理工具

字符串数据类型 ✅ - 'light'

生活比喻： 就像在房间里安装一个"灯光控制器"：

theme = 当前灯光状态（"明亮"或"昏暗"）

setTheme = 灯光开关（用来改变状态）

useState('light') = 初始设置为"明亮模式"

第3-5行：函数定义 + 条件操作

知识点应用：

常量定义 ✅ - const toggleTheme

箭头函数定义 ✅ - () => {}

条件操作符（三元运算符） ✅ - 条件 ? 结果1 : 结果2

比较操作符 ✅ - ===

函数调用 ✅ - setTheme()

生活比喻： 就像制作一个"灯光切换开关"：

如果当前是"明亮"，就切换到"昏暗"

如果当前是"昏暗"，就切换到"明亮"

就像房间的双控开关，按一下就切换状态

等价于if/else写法：

第6-10行：JSX返回 + 组件嵌套

知识点应用：

return语句 ✅ - 函数的输出结果

JSX语法 ✅ - HTML-like语法在JavaScript中

组件使用 ✅ - <ThemeContext.Provider>

对象定义 ✅ - { theme, toggleTheme }

对象属性简写 ✅ - { theme } 等同于 { theme: theme }

children概念 ✅ - 组件的嵌套内容

生活比喻： 就像建造一个"信息广播站"：

ThemeContext.Provider = 广播电台设备

value={{ theme, toggleTheme }} = 要广播的内容（当前主题状态 + 切换开关）

{children} = 能收听广播的所有设备（子组件）

完整的功能流程 🔄

这个组件的作用：

实际使用效果：

用到的所有基础知识总结 📚

✅ 已学过的知识点：

函数定义 - function ThemeProvider

常量定义 - const [theme, setTheme], const toggleTheme

参数解构 - { children }

数组解构 - [theme, setTheme]

条件操作符 - theme === 'light' ? 'dark' : 'light'

比较操作符 - ===

对象定义 - { theme, toggleTheme }

useState工厂函数 - 状态管理

箭头函数 - () => {}

return语句 - 函数输出

Context概念 - Provider组件

children概念 - 组件嵌套

TypeScript类型定义 - 参数类型约束

🎯 代码模式识别：

组件定义 ✅ - 整个函数是一个React组件

状态管理 ✅ - useState管理主题状态

事件处理 ✅ - toggleTheme处理切换事件

数据共享 ✅ - Context.Provider共享数据

这段代码的高级之处 🌟

设计模式应用：

Provider模式 - 向下传递共享数据

状态提升 - 把主题状态放在最顶层

关注点分离 - 主题逻辑独立封装

可复用组件 - 可以包装任何子组件

实际开发价值：

这段代码完美展示了如何将基础知识组合起来解决实际问题，是一个很好的综合应用例子！

next.js的原生api的构建方式

关于next.js路由的学习

Author:Luolink
URL:https://luolink.com/article/example-9
Copyright:All articles in this blog, except for special statements, adopt BY-NC-SA agreement. Please indicate the source!

Relate Posts

游戏资讯站的商业模式分析

vibecoding中的数据库快速设置

Vibe Coders的Git：让你的代码无比安全

Dokploy的部署NEXT项目的浅浅尝试

一个成功的网站，需要做对哪些事情

Catalog

你好！我是

Luolink

🎉luolink 正在努力中🎉

-- 感谢您的支持 ---

👏欢迎和我链接👏

工具导航

交流频道

加入我们的社群讨论分享

点击加入社群

事件类型

异步编程模式 ⏳

10. 组件生命周期概念 🔄

关键词await

在 Next.js 中的常见用法

示例 1：在 getServerSideProps 中使用 await

示例 2：在 API 路由中使用 await

await 的作用是什么？

为什么在 Next.js 中使用 await？

总结

关键词getServerSideProps

主要特点：

语法和用法

示例 1：基本使用

详细解读：

示例 2：使用请求参数

getServerSideProps 的使用场景

getServerSideProps 的注意事项

总结

关键词getStaticProps

主要特点：

语法和用法

示例 1：基本使用

详细解读：

示例 2：带有 revalidate（增量静态生成）

getStaticProps 的使用场景

getStaticProps 与 getServerSideProps 的区别

getStaticProps 的注意事项

总结

关键词 promise

基本概念

Promise 语法

示例：在 Next.js 项目中使用 Promise

1. 基本示例：模拟异步任务

2. 使用 fetch 进行 API 调用

3. 使用 async 和 await

在 Next.js 中的使用场景

总结

关键词async

async 基本概念

await 关键字

async 和 await 的工作原理

在 Next.js 中的使用场景

1. 数据获取（如在 getStaticProps 或 getServerSideProps 中）

2. API 路由中的异步操作

3. 异步事件处理

优点

总结

关键词 fetch

基本用法

使用 async/await

在 Next.js 中的使用场景

1. 在 getStaticProps 中使用 fetch

2. 在 getServerSideProps 中使用 fetch

3. 在客户端组件中使用 fetch

fetch 的配置选项

返回值解析

错误处理

总结

async/await - 排队等待系统 ⏳

fetch - 信息获取员 📡

Promise - 承诺书 📜

children - 包装盒里的东西 📦

Provider - 供应商/配送中心 🏪

prop - 传话筒/信息传递 📞

Middleware - 门卫系统 🛡️

getServerSideProps - 服务器准备数据 🍳

getStaticProps - 预制菜系统 🥘

Head - 网页身份证 🆔

Image优化 - 智能相册 📸

Layout - 房屋框架 🏠

App Directory - 新的房屋设计 🏗️

API Routes - 后端接口 🔌

Dynamic Routes - 动态路由 🎭

function - 功能机器/工具 🔧

return - 交付成果 📦

const - 保险箱/不变的标签 🔒

import - 进货/引入 📥

export - 出货/分享 📤

let - 可变标签 🏷️

示例 1：在 `getServerSideProps` 中使用 `await`

示例 2：在 API 路由中使用 `await`

`await` 的作用是什么？

为什么在 Next.js 中使用 `await`？

关键词`getServerSideProps`

`getServerSideProps` 的使用场景

`getServerSideProps` 的注意事项

关键词`getStaticProps`

示例 2：带有 `revalidate`（增量静态生成）

`getStaticProps` 的使用场景

`getStaticProps` 与 `getServerSideProps` 的区别

`getStaticProps` 的注意事项

示例：在 Next.js 项目中使用 `Promise`

2. 使用 `fetch` 进行 API 调用

3. 使用 `async` 和 `await`

`async` 基本概念

`await` 关键字

`async` 和 `await` 的工作原理

1. 数据获取（如在 `getStaticProps` 或 `getServerSideProps` 中）

使用 `async/await`

1. 在 `getStaticProps` 中使用 `fetch`

2. 在 `getServerSideProps` 中使用 `fetch`

3. 在客户端组件中使用 `fetch`

`fetch` 的配置选项

作用：制造一个可以在组件间共享信息的"广播电台" 2. useState - 记忆盒子工厂

作用：制造一个能记住数据并且能改变数据的"记忆盒子" 3. useRef - 遥控器工厂

作用：制造一个能缓存计算结果的"智能助手" Next.js 特有工厂函数 🎯