Next.js 面试掌握：基本问题（第 4 部分）

Next.js 面试指南：成功的 100 个问题和答案

通过 Next.js 面试指南：成功的 100 个问题和答案，释放您掌握 Next.js 的全部潜力？。无论您是刚开始作为开发人员，还是希望将自己的技能提升到新水平的经验丰富的专业人士，这本综合电子书都旨在帮助您在 Next.js 面试中取得好成绩，并成为一名自信的、做好工作准备的人开发商。该指南涵盖了广泛的 Next.js 主题，确保您为可能遇到的任何问题做好充分准备。这本电子书探讨了服务器端渲染 (SSR)、静态站点生成 (SSG) 等关键概念) ?、增量静态再生 (ISR) ⏳、应用程序路由器 ?️、数据获取 ? 等等。每个主题都得到了透彻的解释，提供了真实的例子和最常见面试问题的详细答案。除了回答问题之外，该指南还重点介绍了优化 Next.js 应用程序、提高性能并确保可扩展性的最佳实践。随着 Next.js 的不断发展，我们还深入研究了 React 18、并发渲染和 Suspense 等尖端功能。这可以确保您始终了解最新进展，为您提供面试官正在寻找的知识。本指南的与众不同之处在于它的实用方法。它不仅涵盖理论，还提供可直接应用于您的项目的可行见解。还详细探讨了安全性、SEO 优化和部署实践，以确保您为完整的开发生命周期做好准备。无论您是在准备顶级科技公司的技术面试，还是寻求构建更高效的系统，可扩展的应用程序，本指南将帮助您提高 Next.js 技能并在竞争中脱颖而出。读完本书后，您将准备好自信地解决任何 Next.js 面试问题，从基本概念到专家级挑战。为自己配备知识，成为一名出色的 Next.js 开发人员？并自信地踏入下一个职业机会！

cyroscript.gumroad.com

31. 解释 Next.js 中数据获取的工作原理。

Next.js 支持多种数据获取方式，根据渲染方式有不同的选项：

在应用程序路由器中：

1. 获取服务器组件:

   • 服务器组件可以直接使用 fetch 来检索数据。由于这些组件在服务器上呈现，因此您无需担心捆绑敏感数据或增加客户端 JavaScript 负载。

   // app/dashboard/page.js
   export default async function Dashboard() {
     const res = await fetch('<https:>');
     const data = await res.json();
   
     return <div>{data.message}</div>;
   }
   
   </https:>

2. 用于悬疑：

   • React Suspense API 中的 use hook 允许在组件中延迟获取，从而实现更流畅的加载体验的数据获取。

   import { use } from 'react';
   
   async function getData() {
     const res = await fetch('<https:>');
     return res.json();
   }
   
   export default function Page() {
     const data = use(getData());
     return <div>{data.message}</div>;
   }
   
   </https:>

3. 使用 useEffect 或 React Query 进行客户端获取:

   • 在客户端组件中，您可以使用传统的客户端获取方法（如 useEffect）或库（如 React Query）在初始渲染后获取数据。
   • 这种方式适合不需要SEO友好或者更新频繁的数据。

4. 动态渲染模式（SSR、ISR）:

   • 通过在获取请求中添加特定标头（例如，对于 SSR，cache: 'no-store' 或对于带有 ISR 的 SSG，cache: 'force-cache'），您可以控制 Next.js 如何缓存和提供数据。

32. 如何管理 Next.js 应用程序中的状态？

Next.js 中的状态管理可以通过多种方法实现，具体取决于应用程序的复杂性和范围：

1. React 的内置状态：
   • 对于中小型应用程序，在客户端组件中使用 useState 和 useReducer 就足够了。 React 内置的状态管理在许多场景下可以有效地处理本地状态。
2. 上下文API：
   • Next.js 支持 React Context API，这对于管理跨组件的全局状态非常有用，而无需外部库。然而，上下文最适合相对静态的全局数据，因为频繁更新会影响性能。
3. 外部状态管理库（Redux、Zustand、Jotai）：
   • Redux：Redux 是大型应用程序的流行选择，它允许跨客户端组件进行可预测的状态管理。如果需要，Redux 可以配置为与 Next.js SSR 一起使用，尽管它通常对于客户端交互更有用。
   • Zustand 或 Jotai：与 Next.js 集成良好的轻量级库。它们比 Redux 更简单，通常是需要全局状态但不具备 Redux 全部复杂性的应用程序的首选。
4. 反应查询：
   • 对于管理服务器状态（从 API 获取的数据），React Query 是一个强大的工具。它处理缓存、后台获取和同步，非常适合需要频繁重新验证或刷新数据的 Next.js 应用程序。
   • React Query 在 App Router 中用于客户端数据获取特别有用，因为它可以简化服务器同步数据的状态和数据管理过程。
5. 服务器组件：
   • 服务器组件可以通过在服务器级别预渲染数据来帮助减少对客户端状态管理的需求。对于不需要在客户端交互或动态变化的数据，服务器组件是在服务器端管理状态的有效解决方案。

33. Next.js 中的中间件是什么，它是如何工作的？

Next.js 中的中间件是一个在请求完成之前运行的函数。它允许开发人员在应用程序呈现页面之前执行代码、修改请求，甚至重写或重定向 URL。中间件对于处理身份验证、日志记录和基于地理位置的重定向等任务非常有用。

• 工作原理：中间件在靠近用户的边缘运行，以实现更快的处理速度。它在位于根目录或特定路由目录中的 middleware.js 文件中定义。收到请求后，中间件会检查条件并可以响应、重定向或允许请求继续发送到原始目的地。

示例：

// app/dashboard/page.js
export default async function Dashboard() {
  const res = await fetch('<https:>');
  const data = await res.json();

  return <div>{data.message}</div>;
}

</https:>

34. Next.js 中的路由是如何工作的？

Next.js 使用基于文件的路由，其中应用程序目录中的文件结构定义应用程序的路由。借助 App Router，Next.js 支持嵌套路由、布局和路由分组，以创建强大且可扩展的路由结构。

• 页面路由：以 page.js 结尾的文件定义路由。例如 app/about/page.js 对应 /about.
• 动态路由：使用方括号定义动态路由（例如，[id]/page.js 表示 /product/[id]）。
• 路由组和布局：使用嵌套布局和分组来组织路由，以保持 URL 结构整洁有序。

35. 如何在 Next.js 中处理嵌套路由？

Next.js 中使用 App Router 的嵌套路由是通过文件夹结构和布局文件的使用来实现的：

• 文件夹结构：将 page.js 文件放置在子文件夹中会创建嵌套路由。例如，app/blog/post/page.js 将映射到 /blog/post。
• 布局：文件夹中的layout.js 文件将持久布局应用于所有嵌套路由。例如，放置 app/blog/layout.js 将布局应用于博客目录中的所有页面。

结构示例：

import { use } from 'react';

async function getData() {
  const res = await fetch('<https:>');
  return res.json();
}

export default function Page() {
  const data = use(getData());
  return <div>{data.message}</div>;
}

</https:>

36. Next.js 项目中公共文件夹的用途是什么？

public文件夹用于存储客户端可直接访问的静态资源，如图像、字体、图标等。公共文件可以在浏览器中通过 /filename 访问。此文件夹有助于组织静态文件，而无需将它们捆绑到 JavaScript 包中，从而提高性能。

37. 如何在 Next.js 中创建自定义 500 错误页面？

要在 App Router 中创建自定义 500 错误页面，请在根级别或特定路由文件夹中添加 error.js 文件：

// middleware.js
import { NextResponse } from 'next/server';

export function middleware(request) {
  const token = request.cookies.get('authToken');
  if (!token) {
    return NextResponse.redirect(new URL('/login', request.url));
  }
}

每当服务器端发生错误时都会显示此文件。

38. Next.js 中基于文件的路由如何工作？

Next.js 中基于文件的路由将 URL 映射到应用程序目录中的文件和文件夹。应用程序中的每个文件或文件夹都定义了一个路由，并且特定的约定（例如 page.js 和 [param]）可以轻松定义静态、动态和嵌套路由。

• 静态路由：每个 page.js 文件都会创建一个唯一的路由。
• 动态路由：用方括号定义（例如，[id].js 表示 /product/[id]）。
• 嵌套路由：按文件夹组织，允许深度嵌套和复杂的路由结构。

39. Next.js 中有哪些组件样式选项？

Next.js 支持各种样式选项：

1. CSS 模块：带有 .module.css 文件的模块化样式表，用于将样式范围限定到特定组件。
2. CSS-in-JS：像 styled-components、Emotion 或内置的 @next/css 这样的库，用于直接在 JavaScript 文件中编写 CSS。
3. 全局 CSS：在 _app.js 中或通过 App Router 导入的传统全局样式表。
4. Tailwind CSS：实用优先的 CSS 框架，与 Next.js 集成良好。
5. Sass/SCSS：通过安装 sass 添加对 Sass 的支持，以实现其他 CSS 功能。

40. TypeScript 如何与 Next.js 配合使用？

Next.js 内置了对 TypeScript 的支持。添加 tsconfig.json 文件或使用 .tsx 文件将自动在 Next.js 项目中配置 TypeScript。 Next.js 优化 TypeScript 集成、处理配置并提供开箱即用的类型定义。

以上是Next.js 面试掌握：基本问题（第 4 部分）的详细内容。更多信息请关注PHP中文网其他相关文章！