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 在 <Image> 标签代码中引用相同的图像。例如，src=/logo.png。

自动图像优化

Next.js 实现自动图像优化，允许在浏览器支持时调整大小、优化和提供现代格式的图像。因此，大型图像在需要时会为较小的视口调整大小。图像优化是通过导入 Next.js Image 组件实现的，该组件是 HTML <Image> 元素的扩展。要使用 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 自动设置

npx create-next-app
# or
yarn create next-app

安装完成后，您可以运行开发服务器并访问 https://127.0.0.1:3000 上的页面。

通过对 Next.js 的介绍，我们现在可以深入了解不同模式的实现。