Next.js 简介
Next.js 由 Vercel 创建，是一个混合 React 应用程序的框架。
通常很难理解加载内容的所有不同方式。
Next.js 将其抽象化以使其尽可能简单。 该框架允许构建可扩展、高性能的 React 代码，并带有零配置方法。
这使开发人员可以专注于构建功能。
让我们探索与讨论相关的 Next.js 功能
基本功能
预渲染
默认情况下，Next.js 会提前为每个页面生成 HTML，而不是在客户端生成。这个过程称为预渲染。
Next.js 确保使页面完全交互所需的 JavaScript 代码与生成的 HTML 相关联。
一旦页面加载，此 JavaScript 代码就会运行。此时，React JS 在 Shadow DOM 中工作以确保呈现的内容与 React 应用程序将呈现的内容相匹配，而无需实际操作它。这个过程称为水合作用。
每个页面都是从 pages 目录中的 .js、.jsx、.ts 或 .tsx 文件导出的 React 组件。路由是根据文件名确定的。
例如 pages/about.js 对应路由/about。
Next.js 支持通过服务器端渲染 (SSR) 和静态生成进行预渲染。
还可以在同一个应用程序中混合不同的渲染方法，其中一些页面使用 SSR 生成，而其他页面使用静态生成。客户端呈现也可用于呈现这些页面的某些部分。
数据获取
Next.js 支持使用 SSR 和静态生成来获取数据。
Next.js 框架中的以下功能使这成为可能。
-
getStaticProps
-
与静态生成一起使用来渲染数据
-
getStaticPaths
-
与静态生成一起使用以呈现动态路由
-
getServerSideProps
-
适用于SSR
-
静态文件服务
像图像这样的静态文件可以在根目录中名为 public 的文件夹下提供。
然后可以使用根 URL 在不同页面上的 <img> 标记代码中引用相同的图像。 例如，src=/logo.png。
自动图像优化
Next.js 实现了自动图像优化，它允许在浏览器支持时以现代格式调整图像大小、优化和提供图像。
因此，在需要时会针对较小的视口调整大图像的大小。
图像优化是通过导入 Next.js Image 组件来实现的，该组件是 HTML <img> 元素的扩展。 要使用 Image 组件，应按如下方式导入。
import Image from 'next/image'
可以使用以下代码在页面上提供图像组件。
<Image src="/logo.png" alt="Logo" width={500} height={500} />
路由
Next.js 支持通过 pages 目录进行路由。
此目录或其嵌套子目录中的每个 .js 文件都成为具有相应路由的页面。
Next.js 还支持使用命名参数创建动态路由，其中显示的实际文档由参数的值决定。
例如，页面 pages/products/[pid].js 将匹配 /post/1 之类的路由，其中 pid=1 作为查询参数之一。
Next.js 也支持链接到其他页面上的这些动态路由
代码拆分
代码拆分确保仅将所需的 JavaScript 发送到客户端，这有助于提高性能。
Next.js 支持两种类型的代码拆分。
-
基于路由：这是在 Next.js 中默认实现的。 当用户访问一个路由时，Next.js 只发送初始路由所需的代码。 当用户浏览应用程序时，会根据需要下载其他块。 这限制了需要一次解析和编译的代码量，从而缩短了页面加载时间。
-
基于组件：这种类型的代码拆分允许将大型组件拆分为单独的块，可以在需要时延迟加载。 Next.js 通过动态 import() 支持基于组件的代码拆分。 这允许您动态导入 JavaScript 模块（包括 React 组件）并将每个导入作为单独的块加载。
开始 Next.js 的方式
Next.js 可以安装在任何带有 Node.js 10.13 或更高版本的 Linux、Windows 或 Mac OS 上。 自动和手动设置选项均可用。
使用 create-next-app 自动设置
yarn create next-app --typescript
安装后，可以运行开发服务器并访问 http://localhost:3000 上的页面。
通过对 Next.js 的介绍，现在可以研究不同模式的实现。
知识点
- 预渲染
- 水合作用
- 路由
- getStaticProps
- getStaticPaths
- 静态文件服务 public
- Image
- 路由
- 代码拆分