使用 Next.js 时默认提高性能

Next.js 会在 React 应用中执行许多优化，因此您无需手动执行

Houssein Djirdeh

注意：由于 Glitch 已停止托管，此页面上的一个或多个演示已无法正常运行。

Next.js 是一种固执己见的 React 框架，内置了多项性能优化。该框架背后的主要理念是，通过默认包含这些功能，确保应用启动并尽可能保持高性能。

本简介将简要介绍该框架提供的许多功能。本系列中的其他指南将更详细地探讨这些功能。

注意：Chrome 正在与 Next.js 合作，旨在改进该框架，以便任何开发者都能构建快速、服务器端渲染的 React 应用。最近添加了许多新的优化，例如模块/非模块支持和改进的精细分块策略。

您将学到什么？

虽然 Next.js 默认提供许多性能优化，但这些指南旨在更详细地解释这些优化，并向您展示如何使用它们来构建快速、高效的体验。

注意：本合集假定您对 React 有基本的了解。如果没有，请查看 React 的“使用入门”页面。

通常，您可以对 React 网站进行许多优化，这些优化也适用于使用 Next.js 构建的应用。由于本课程重点介绍 Next.js 的具体功能，因此不会涵盖这些内容。如需详细了解常规 React 优化，请参阅我们的 React 集合。

Next.js 与 React 有何不同？

React 是一个库，可让您更轻松地使用基于组件的方法构建界面。React 虽然功能强大，但它只是一个界面库。许多开发者会添加其他工具，例如模块打包器（例如 webpack）和转译器（例如 Babel），以获得完整的构建工具链。

在 React 集合中，我们采用了使用 Create React App (CRA) 快速启动 React 应用的方法。CRA 通过一条命令提供完整的构建工具链，从而消除了设置 React 应用的麻烦。

虽然 CRA 中内置了一些默认优化，但该工具旨在提供简单直接的设置。开发者可以自行决定是否弹出并自行修改配置。

Next.js 也可以用来创建新的 React 应用，但采用的是不同的方法。 它会立即提供许多开发者希望拥有但发现难以设置的常见优化，例如：

• 服务器端渲染
• 自动代码拆分
• 路由预提取
• 文件系统路由
• CSS-in-JS 样式 (styled-jsx)

设置

如需创建新的 Next.js 应用，请运行以下命令：

npx create-next-app new-app

注意：npx 是一个软件包运行程序，会随 npm 5.2.0 或更高版本自动安装。它简化了管理软件包所涉及的许多流程，包括运行 CLI 命令（如 create-next-app），而无需在计算机上全局安装这些命令。

然后，前往该目录并启动开发服务器：

cd new-app
npm run dev

注意：您还可以将 Next.js 添加到现有 React 应用中。如需了解具体操作方法，请参阅手动设置。

以下嵌入内容展示了新 Next.js 应用的目录结构。

• 点击 Remix to Edit（混剪以编辑）使项目可编辑。
• 如需预览网站，请按查看应用。然后按全屏 。

请注意，系统会创建一个 pages/ 目录，其中包含一个文件：index.jsx。Next.js 采用文件系统路由方法，其中此目录中的每个页面都作为单独的路由提供。在此目录中创建新文件（例如 about.js）会自动创建新路由 (/about)。

组件也可以像任何其他 React 应用一样创建和使用。系统已创建一个 components/ 目录，其中包含一个组件 nav.js，该组件已导入到 index.js 中。默认情况下，Next.js 中使用的每个导入仅在加载该页面时提取，从而提供自动代码拆分的好处。

此外，Next.js 中的每个初始网页加载都是服务器端渲染。如果您在开发者工具中打开“网络”面板，则可以看到对文档的初始请求会返回一个完全由服务器呈现的页面。

“网络”面板的“预览”标签页显示，当请求网页时，Next.js 会返回视觉上完整的 HTML。

注意：请参阅服务器渲染，了解服务器端渲染通常如何为用户带来更好的体验。

这些只是 Next.js 自动提供的众多功能中的一小部分。许多模板都是可自定义的，可以针对不同的用例进行修改。

接下来怎么做？

一语双关 😛

本系列中的其他指南将详细探讨特定的 Next.js 功能：

• 路由预提取，可加快网页导航速度
• 提供混合网页和仅限 AMP 的网页，以便从搜索引擎中更快地加载
• 使用动态导入对组件进行代码拆分，以减少 JavaScript 占用空间