这是我参与「 第五届青训营 」伴学笔记创作活动的第 17 天。
前言
今天是 2023 年 1 月 31 日星期二，癸卯年正月初十。
依然祝大家兔年快乐🐰
昨天的课程中，我学习了 Next.js 实战项目，昨天的笔记没有做完，今天进行一些补充。Next.js 是一个轻量级的 React 服务端渲染应用框架，Next.js 的主页中可以找到相关资料文档。
Next.js 接口
一个接口的生成有以下几个过程:
-
content-type builder 编辑结构体
-
content manager 配置数据源，并且发布
-
settings roles里选择对应角色并勾选要发布的接口类型
4.如果涉及嵌套，在接口后加上 populate=deep 参数 (npm install strapi-plugin- populate--deep--save ) 没安装加参数populate=*，但只能嵌套一层
Next.js 页面
在 Next.js 中，一个 page（页面） 就是一个从 .js、jsx、.ts 或 .tsx 文件导出（export）的 React 组件 ，这些文件存放在 pages 目录下。每个 page（页面）都使用其文件名作为路由（route）。
示例： 如果创建了一个命名为 pages/about.js 的文件并导出（export）一个如下所示的 React 组件，则可以通过 /about 路径进行访问。
function About() {
return <div>About</div>
}
export default About
默认情况下，Next.js 将预渲染每个 page（页面）。这意味着 Next.js 会预先为每个页面生成 HTML 文件，而不是由客户端 JavaScript 来完成。预渲染可以带来更好的性能和 SEO 效果。
每个生成的 HTML 文件都与该页面所需的最少 JavaScript 代码相关联。当浏览器加载一个 page（页面）时，其 JavaScript 代码将运行并使页面完全具有交互性。
Next.js 具有两种形式的预渲染： 静态生成（Static Generation） 和 服务器端渲染（Server-side Rendering）。这两种方式的不同之处在于为 page（页面）生成 HTML 页面的 时机 。
- 静态生成：HTML 在 构建时 生成，并在每次页面请求（request）时重用。
- 服务器端渲染：在 每次页面请求（request）时 重新生成 HTML。
重要的是，Next.js 允许用户为每个页面选择预渲染的方式。可以创建一个 “混合渲染” 的 Next.js 应用程序：对大多数页面使用“静态生成”，同时对其它页面使用“服务器端渲染”。
出于性能考虑，相对服务器端渲染，最好使用静态生成。 CDN 可以在没有额外配置的情况下缓存静态生成的页面以提高性能。但是，在某些情况下，服务器端渲染可能是唯一的选择。
还可以将客户端渲染与静态生成或服务器端渲染一起使用。这意味着页面的某些部分可以完全由客户端 JavaScript 呈现。
Next.js 快速刷新
快速刷新（Fast Refresh）是 Next.js 的一项功能。当用户编辑 React 组件时，可以提供实时的快速反馈。 默认情况下，快速刷新（Fast Refresh）功能在所有 Next.js 9.4 或更新版本的应用程序中是开启的。启用 Next.js 的快速刷新（Fast Refresh）后， 大多数编辑器应该在一秒钟内就可以感知到了，并且不会丢失组件的状态。
