最常问的 Next.js 面试题及答案

以下是最常被问到的 Next.js 面试题及其答案列表。

1) 什么是 Next.js？

Next.js 是一个开源的、轻量级的 React.js 框架，它使开发人员能够构建静态和服务器端渲染的 Web 应用程序。它由 Zeit 创建。Next.js 框架基于 React、Webpack 和 Babel，并允许我们轻松编写服务器渲染的 React 应用。它不需要任何 Webpack 配置，只需要 npm run dev 即可开始构建你的下一个功能丰富的 Web 应用程序。

2) Next.js 用于什么？/ 为什么世界领先的公司偏爱 Next.js？

如果你想从零开始使用 React 构建一个完整的 Web 应用程序，你必须满足以下几点：

• 你的代码必须使用 Webpack 等打包器进行打包，并使用 Babel 等编译器进行转换。
• 你需要进行生产优化，例如代码拆分。
• 你需要为性能和 SEO 静态预渲染一些页面。你可能还想使用服务器端渲染或客户端渲染。
• 你可能需要编写一些服务器端代码来将你的 React 应用连接到你的数据存储。

Next.js 满足以上所有要求。

世界领先的公司偏爱 Next.js 的原因

零配置：Next.js 提供自动代码拆分、基于文件系统的路由、热代码重载和通用渲染；这就是为什么世界领先的公司偏爱它。

完全可扩展：Next.js 完全可扩展，并对 Babel 和 Webpack 拥有完全的控制权。它提供了一个可定制的服务器、路由和 Next 插件。

已准备好用于生产：Next.js 针对更小的构建尺寸、更快的开发编译以及许多其他改进进行了优化，使其成为一个受欢迎的选择。

Next.js 可以部署在任何地方：Next.js 是一个开源的、轻量级的 React.js 框架，它使开发人员能够构建静态和服务器端渲染的 Web 应用程序。

3) 安装 Next.js 的过程是什么？/ 如何安装 Next.js？

在安装 Next.js 之前，你必须在你的系统上安装 Node.js。了解如何在你的系统上安装 Node.js：https://tpointtech.cn/install-nodejs

它需要 NPM 来开始安装 Next.js 及其所有依赖项。

按照下面给出的步骤安装 Next.js

• 首先，创建一个目录来存放 Next.js 项目并进入该目录

• 现在，使用 package.json 文件初始化它。
• 使用 npm init -y 的 y 标志
• 使用以下语法安装 Next.js

• 使用运行脚本语言更新 package.json 来启动 Next.js 应用程序的初始化。
• 现在，找到根文件夹中的 package.json 文件并添加以下脚本

• 之后，文件系统是主要的 API。每个 ".js" 文件都成为一个路由，它会被自动处理和渲染。
• 现在，过程完成，Next.js 已安装在你的系统上。

4) Next.js 最突出的特点是什么？

以下是 Next.js 最突出的功能列表，这些功能最让开发人员兴奋：

• js 默认提供简单的服务器渲染。
• js 支持静态导出。
• 它提供了一个基于 Webpack 的开发环境，支持热模块替换 (HMR)
• 它提供了自动代码拆分，以加快页面加载速度。
• 它支持简单的客户端路由（基于页面）或基于文件系统的路由。
• 它提供完整的 Webpack 和 Babel 控制。
• 它提供更快、更优化的开发编译。
• 它可以与 Express 或任何其他 Node.js HTTP 服务器一起实现。
• 你可以轻松地使用自己的 Babel 和 Webpack 配置对其进行自定义。
• 它支持热代码重载。

除此之外，Next.js 还有一些很棒的功能，例如：

• 动态样式和主题支持
• 内置 CSS 供应商前缀
• 通过插件进行 CSS 预处理
• 完整的 CSS 支持，没有性能折衷
• 它的运行时大小非常小。只有 3kb（从 12kb 压缩而来）
• 它提供源映射支持

5) 哪些类型的网站最常使用 Next.js？

Next.js 是一个流行的 React.js 框架，最常用于构建以下类型的应用程序和网站：

• 静态网站
• 桌面网站
• SEO 友好型网站
• 服务器渲染应用
• 渐进式 Web 应用 (PWA) 等。

6) Next.js 是否可以与 Redux 一起使用？

可以。你可以轻松地将 Next.js 与 Redux 一起使用。

7) 在 Next.js 中获取数据的推荐方法是什么？

在 Next.js 中获取数据有多种方法，但 Next.js 本身推荐 **getInitialProps**，这是一个用于从任何地方检索数据的异步函数。当我们使用 **getInitialProps** 检索数据时，它会接收一个上下文对象，该对象具有以下属性：

• pathname- 指定 URL 的路径部分。
• query- 用于指定 URL 的查询字符串部分，解析为对象。
• asPath- 指定实际路径（包括查询）的字符串，显示在浏览器中。
• req- 用于指定 HTTP 请求对象（仅服务器端）。
• res- 用于指定 HTTP 响应对象（仅服务器端）。
• err- 如果在渲染过程中遇到任何错误，用于指定错误对象。

8) 给出一个示例，演示如何在 Next.js 中设置 CDN？

要设置 Next.js 中的 CDN，开发人员必须遵循以下步骤：

首先，我们必须先设置 "assetPrefix" 设置，并配置我们的 CDN 源以支持和解析 Next.js 托管的域。

如果 CDN 存在于单独的域上，我们必须设置一个配置选项，如下所示：

9) Create-React-App 和 Next.js 用于相同的事情吗？

Create-React-Appbasically 是 React 加上一个集成的构建系统。它就像一个很好的模板，这样我们就不需要设置 Webpack、Babel 和其他依赖包来运行 React。除此之外，如果你需要额外的功能，如路由、服务器端渲染等，你只需要在 Create-React-App 的基础上添加包。另一方面，Next.js 是一个开源的、轻量级的全栈 React 框架，它捆绑了一个高效的构建系统、服务器端渲染、路由、API 路由以及许多其他使生产环境变得轻松的出色功能。

10) 如何安装和使用 Next.js？

安装和运行 Next.js 主要有两种方法。如果你是 Next.js 的新手，我们建议你确保你的开发环境已准备就绪。Next.js 是一个 React 框架，它要求你的系统上安装了 Node.js。如果你没有安装 Node.js，你可以从这里安装：https://tpointtech.cn/install-nodejs。Next.js 要求 Node.js 版本为 10.13 或更高版本。你还应该有你的文本编辑器和终端。

Next.js 系统要求

• 你必须安装 Node.js 版本 12.0 或更高版本。
• js 支持 Windows、MacOS 和 Linux。

安装 Next.js 的最简单方法

• 在你的系统上安装和运行 Next.js 的最简单方法是使用 create-next-app 创建一个新的 Next.js 应用。它会自动为你设置所有内容。要创建项目，请在 Node.js 控制台中运行以下命令：

• 如果你想从 TypeScript 项目开始，可以使用以下命令：

• 完成安装后，请按照说明启动开发服务器。你也可以尝试编辑 pages/index.js，并在浏览器中查看结果，它默认运行在 https://:3000

Next.js 的手动安装和设置

• 首先，通过运行以下命令在你的项目中安装 next、react 和 react-dom。

• 现在，打开 package.json 文件并添加以下脚本：

上面的脚本指定了开发应用程序的不同阶段：

• dev - 运行 next dev，以开发模式启动 Next.js。
• build - 运行 "next build"，为生产环境构建应用程序。
• start - 运行 "next start"，启动 Next.js 生产服务器。
• lint - 运行 "next lint"，设置 Next.js 内置的 ESLint 配置。

Next.js 以页面为中心构建。页面是从 pages 目录中导出的 React 组件。页面根据其文件名映射到路由。例如，pages/about.js 映射到 /about。你甚至可以使用文件名添加动态路由参数。

11) 如何禁用 Next.js 中的 etag 生成？

通常，我们使用 app.disable('etag') 语法来禁用 Next.js 中的 etag 生成。但是，这可能不适用于所有静态内容。因此，我们应该使用以下语法来禁用所有静态内容的 etag。

语法

12) 如何配置 Next.js 中的 build-id？

要配置 Next.js 中的 build-id，我们必须在我们的构建之间配置一个静态 ID。因此，我们必须提供 "generateBuildId" 函数以及以下配置。

语法

13) 如何在项目中创建一个 pages 目录？

要在我们的项目中创建一个 pages 目录，我们必须用以下内容填充 ./pages/index.js：

要开始开发我们的应用程序，我们必须运行 npm run dev 或 yarn dev 命令。这将启动开发服务器，运行在 https://:3000。现在我们可以访问 localhost：https://:3000 来查看我们的应用程序。

14) 给出一个示例，演示如何在 Next.js 中创建自定义错误页面？

我们可以通过在 pages 文件夹中定义 _error.js 来创建自己的自定义错误页面。请看以下示例：

15) 你对 Next.js 中的代码拆分有什么理解？

通常，代码拆分是 webpack 最引人注目的功能之一。此功能使我们能够将代码拆分成各种捆绑包，这些捆绑包可以按需加载或并行加载。这主要用于实现更小的捆绑包，并使我们能够控制资源加载的优先级，最终对加载时间产生重大影响。

代码拆分主要有三种方法：

• 入口点：用于手动拆分代码，使用入口配置。
• 防止重复：它使用 Entry dependencies 或 SplitChunksPlugin 来去重和拆分块。
• 动态导入：它通过模块内的内联函数调用来拆分代码。

它主要用于启用永远不会加载不必要代码的页面。

16) 如何在 Next.js 中启用 AMP？

这是一个重要问题，在许多 Next.js 面试题中都会被问到。有两种方法可以在 Next.js 中启用 AMP。

• AMP-First 页面
• 混合 AMP 页面

AMP-First 页面：AMP-First 页面会服务于网站的主要流量以及搜索引擎带来的流量。使用以下语法来实现 AMP-First 页面：

示例

混合 AMP 页面：混合 AMP 页面允许用户拥有传统页面的 AMP 版本共存，以便搜索引擎可以在不同的移动搜索结果中显示 AMP 版本或页面。

请看以下示例，了解如何为页面实现混合 AMP：

示例

17) Next.js 是否可以托管在 Nginx 等 Web 服务器上？

Next.js 不像静态 HTML 文件那样简单。它需要一个运行 Node.js 的应用程序服务器来部署和运行 Next.js 应用程序。在这里，我们收到需要服务器端处理的请求。