获得徽章 19
- #每天一个知识点# Next.js 团队推荐尽可能使用 Static Generation 技术创建网页（即 SSG，不管是带还是不带数据），这样你的页面在一次构建之后，后续都是通过CDN方式对外提供服务，这比在每次请求服务器时才渲染页面（SSR）要快得多。
另外，对于一个没有获取数据的页面，Next.js默认会使用静态生成进行预渲染。这里有一个例子:
```tsx
function About() {
return <div>About</div>
}
export default About
```
这个页面在构建阶段（next build）会生成一个静态 HTML 文件。
相关链接：
nextjs.org 展开赞过
评论1 - #每天一个知识点# Next 13 App Router，使用 <Suspense> 的地方默认支持 Streaming Server Rendering 特性（当然，Pages Router 不支持这个特性）。展开来说：
Streaming Server Rendering 是 React 18 引入的特性，为了解决传统服务端渲染时，高耗时的服务端数据请求，会阻塞整个应用的显示和交互时间。而Streaming 基于组件这个最小单位，将整个 HTML 分成若干个更小的 chunks，谁先准备好，谁就发送到客户端，大大提升了网页的显示和可交互性。
Next 13 App Router 中在使用 <Suspense> 时就天然支持 Streaming 特性，而且还能享受 Selective Hydration，也就是优先渲染好的这部分组件，可以提前水合，就能交互了，不管这时候其他地方是不是还有loading。
相关链接：
-react.dev
-nextjs.org 展开赞过 评论1 - #每天一个知识点# React 项目可以通过 React.lazy() + <Suspense> 实现组件的懒加载。Next.js 将这种两个整合成了一个 next/dynamic 函数，使用起来更加方便了
```jsx
import dynamic from 'next/dynamic'
const DynamicHeader = dynamic(() => import('../components/header'), {
loading: () => <p>Loading...</p>,
})
export default function Home() {
return <DynamicHeader />
}
```展开赞过 评论1 - #每天一个知识点# Next.js 内置了 TypeScript 支持，可以通过下面的方式启用并得到类型支持
- 文件后缀改成 .ts/.tsx 后，执行 next dev 或 next build 指令时会自动安装必要依赖，并且会创建一个预先配置好的 tsconfig.json 文件（TypeScript 版本至少是 v4.5.2）
- 另外，Next.js 会根据 tsconfig.json 中的 "paths" 和 "baseUrl" 配置信息，生成构建时用到的 resolve alias 映射，确保打包时不会有问题
- 类型支持：项目代码
- SSR、SSG 的对应类型可以从 next 引入：import type { GetStaticProps, GetStaticPaths, GetServerSideProps } from 'next'
- API Routes：import type { NextApiRequest, NextApiResponse } from 'next'
- 自定义 App（./pages/_app.tsx）：import type { AppProps } from 'next/app'
- 类型支持：配置文件（next.config.js）
- next 的配置文件只能是 JavaScript 文件
- 可通过 TS import types 功能引入类型提示支持：/** @type {import('next').NextConfig} */展开评论点赞 - #每天一个知识点# @testing-library/react v13.0.0 仅支持 React 18，且在 v13.1.0 中增加了 renderHook API 用于测试 React Hook。
如果你的项目使用 React17-，那么最高只能安装 v12.1.5 版本，测试 React Hook 的话，需要借助 @testing-library/react-hooks 库具体信息看下方链接。展开赞过 评论2 - #每天一个知识点# 关于 TypeScript tsconfig.json 配置文件中的 path 属性—已经配置了 path 属性，为啥还要在 ts-node 还要安装 tsconfig-paths 依赖呢？
其实 tsconfig 里的 path 配置只是在语法层面让 TS 知道文件的位置，编译时 path 路径会原样输出，不会翻译成实际路径，因为 TypeScript 默认这块是构建工具来做的（通过 resolve alias），path 配置只是对已有构建工具语法层面的增强。展开等人赞过 26 - #每天一个知识点# 自 Next.js 12 发布以来，已经内置了 Jest 的配置，使用的是 SWC 这个基于 Rust 的编译器，比使用 babel 编译更快，而且配置更简洁！使用只需 4 步：
1. 安装依赖：npm install --save-dev jest jest-environment-jsdom @testing-library/react @testing-library/jest-dom
2. 创建 jest.config.mjs 文件，并引入 import nextJest from 'next/jest.js'，并且 export default nextJest({ dir: './', })({ testEnvironment: 'jest-environment-jsdom', }) 即可
3. 依据约定在 __tests__ 目录下创建测试文件（例如：__tests__/index.test.js）
4. 执行测试 npx jest —watch展开评论点赞 - #每天一个知识点# Jest 常用指令及 API 介绍
- 运行指定测试文件：npx jest path/to/file
- 使用开发模式、以输出覆盖率信息的方式执行测试：npx jest —watch —coverage
- 输出当前项目的所有测试文件npx jest —listTests
- 指定测试某些用例：describe.only、test.only/it.only
- 忽略某些测试用例：describe.skip、test.skip/it.skip展开赞过 评论1 - #每天一个知识点# Next.js next 3 条指令的说明
- next dev：启动开发服务器。开发阶段使用，有 Fast Fresh 支持
- next build: 构建生产环境应用
- next start：启动生产环境应用展开评论点赞 - #每天一个知识点# jest 中 `expect()` 上3 种相等方法的区别（`.toBe()`、`.toEqual()`、`.toStrictEqual()`）
- `.toBe()`: 内部使用 `Object.is` 比较原始值和对象
- `.toEqual()`: 深度递归比较两个值（特别适合对象递归比较），使用 `Object.is` 比较原始值
- `.toStrictEqual()`: 与 `.toEqual()` 一样，不过不会忽略 `undefined` 的属性值展开评论点赞
nextjs.org