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

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

81. App Router 中的数据获取约定是什么，它们与 Pages Router 有何不同？

在带有 App Router 的 Next.js 中，数据获取遵循与旧的 Pages Router 方法不同的新约定。

1. 应用程序路由器数据获取：
   • App Router 中的服务器端数据获取是使用组件级代码中的异步函数完成的。数据获取可以使用 useEffect 或新的 getServerSidePropslike 函数直接在组件内进行，但它与组件结构集成得更紧密。
   • 页面级布局：您可以在布局本身中定义数据获取，从而更轻松地为多个子页面获取数据并跨组件共享该数据。
   • 并行数据获取：App Router 允许并行运行多个数据获取操作（通过返回 Promise 数组），使其比 Pages Router 的顺序数据获取更高效。
   • 流式传输和 Suspense：App Router 利用 React Suspense 和流式传输，允许页面在仍在获取其他数据的同时进行流式传输，从而提高性能。
2. 页面路由器数据获取：
   • Pages Router 中的数据获取使用传统方法，例如 getServerSideProps、getStaticProps 和 getInitialProps。这些函数在页面级别调用，并具有更静态或服务器绑定的方法。
   • 没有嵌套布局：在 Pages Router 中，数据通常是按页面获取的，并且没有像 App Router 中那样的布局级数据获取或并行数据获取的概念。
   • 同步渲染：与可以异步获取数据并将数据传输到页面的 App Router 不同，Pages Router 传统上会在渲染页面之前等待所有数据被获取。

总结：

• App Router 引入了更灵活、并行和流式的数据获取，并在组件和布局级别进行了更多集成。
• 页面路由器依赖于页面特定的静态和服务器端数据获取方法。

82. 异步组件在 Next.js 中的作用是什么？为什么它们在 App Router 中很有用？

在带有 App Router 的 Next.js 中，异步组件用于为需要异步获取数据的组件启用 服务器端渲染 (SSR)。这些组件对于渲染组件之前需要数据但应从服务器或外部 API 获取数据的场景很有用。使用异步组件允许 Next.js 通过在服务器上渲染组件之前获取必要的数据来优化渲染过程，从而提高性能和 SEO。

为什么它们在 App Router 中很有用？

• 改进的数据获取：异步组件允许并行数据获取，这意味着可以在SSR或布局中并行获取多条数据，从而缩短加载时间。
• 增强的性能：由于数据是在服务器端获取并在渲染之前传递到组件，因此无需等待客户端加载数据，从而带来更快的用户体验。
• 与 Suspense 集成：这些组件的异步特性与 React 18 的 Suspense 很好地集成，允许组件“暂停”渲染直到获取数据，从而改善用户体验并使应用程序更具可扩展性。

83. App Router 如何使用新的 React 18 功能简化数据获取？

App Router 通过引入 React 18 功能简化了数据获取，主要是 Suspense 和 并发渲染。这些功能使 Next.js 能够以更高效、灵活和简化的方式处理数据获取：

1. 数据获取暂停：
   • App Router 完全支持 Suspense，它使 React 组件能够在等待异步操作（如数据获取）完成时暂停渲染。这使得在 UI 中处理加载状态和异步操作变得更加容易。
   • 数据获取可以在组件本身中异步完成，Suspense 允许您管理等待数据的组件的加载状态。
2. 并发渲染：
   • 借助 React 18 的并发渲染，Next.js 可以在后台渲染组件并优先处理高优先级更新。这意味着数据获取可以与渲染同时进行，React 可以根据重要性决定首先渲染哪些组件，从而实现更快的页面加载和更好的用户体验。
   • App Router 利用这一点，允许多个数据获取操作同时运行，从而更轻松地加载需要来自不同来源的数据的复杂页面。
3. 流数据：
   • App Router 还允许并行传输数据，这意味着您可以在等待获取其他数据的同时开始渲染页面的部分内容。这显着减少了首字节时间 (TTFB)，并允许用户更快地查看内容。
4. 布局：
   • App Router 的布局系统可以处理应用程序不同级别的数据获取，因此可以在布局级别而不是每个单独的页面上完成数据获取，从而更轻松地管理和共享数据多个页面或组件。

84. 新的 use 挂钩是什么？它如何简化 Next.js 中的异步数据处理？

use hook 是 React 18 中引入的一项新功能，并通过 App Router 集成到 Next.js 中。它用于直接在组件中处理异步数据获取，使得在功能组件中获取和处理异步数据变得更简单、更具声明性。 use 钩子是 并发 React 功能的一部分，旨在简化 React 组件中的处理承诺。

它如何简化 Next.js 中的异步数据处理？

• 简单性：use hook 允许您直接等待 Promise 解析并使用数据，而不是使用 useEffect 和 useState 来管理异步请求的生命周期。可用。

  • 示例：
    

    import { use } from 'react';
    
    function MyComponent() {
      const data = use(fetchData()); // fetchData is a promise
      return <div>{data}</div>;
    }
    
    

• 自动挂起集成：use hook 与 Suspense 无缝集成，这意味着如果组件正在使用 use hook 来获取数据，React 会自动挂起该组件直到数据可用，同时显示加载状态。这消除了手动处理加载状态或使用额外钩子的需要。

• 并发渲染支持：use hook 利用了 React 的并发渲染 功能，这意味着数据获取可以与其他渲染操作并行进行。这提高了应用程序的效率，并使管理复杂应用程序中的异步操作变得更加容易。

• 简化样板：传统上，React 中的异步数据获取涉及使用 useState 和 useEffect 等钩子手动管理加载、错误和成功状态。 use 钩子通过直接在组件内部处理 Promise 解析来简化这一过程，减少样板代码并使代码库更干净、更简洁。

摘要：

• 异步组件通过在渲染之前异步加载数据来允许服务器端获取和优化，从而提高性能。
• React 18 项功能，例如 Suspense 和并发渲染，与 App Router 完全集成，简化了并行数据获取，并通过更快的渲染改善了用户体验。
• use hook 通过更轻松地直接在组件中获取和使用 Promise、减少样板文件并与 Suspense 无缝集成，简化了异步数据处理。

84. 如何在 App Router 中动态处理搜索参数？

在 App Router 中，可以使用 useSearchParams 挂钩或通过读取服务器端或页面逻辑中的查询字符串来处理动态搜索参数。 useSearchParams 钩子由 React 提供，用于在组件内动态处理查询参数。

使用 useSearchParams 的示例：

import { use } from 'react';

function MyComponent() {
  const data = use(fetchData()); // fetchData is a promise
  return <div>{data}</div>;
}

• 带有查询参数的动态路由：您可以动态访问查询参数并执行操作，例如根据搜索词获取数据或应用过滤器。
• URL 操作：您还可以使用 useSearchParams 修改查询参数，以根据用户与页面的交互操作 URL，例如更新过滤器或搜索查询。

85. App Router 的代码分割如何工作？

在App Router中，代码分割是自动处理的，以优化应用程序JavaScript的交付。 Next.js 根据路由和组件拆分 JavaScript 包，因此仅加载当前页面所需的代码。

App Router 中代码分割的主要功能

：

1. 按路线自动拆分
：当用户导航到特定路线时，仅加载该路线所需的 JavaScript。这减少了初始加载时间并提高了性能。
2. 服务器端渲染 (SSR) 和客户端渲染 (CSR)
：App Router 通过在服务器上渲染初始页面（如果使用 SSR）来优化代码分割，然后根据需要加载其他代码在客户端的页面或路由之间切换。
3. Suspense 和延迟加载
：App Router 可以与 React Suspense 一起延迟加载组件。这允许在需要时按需加载应用程序的某些部分，从而进一步优化性能。

具有代码分割功能的延迟加载组件示例
:

import { useSearchParams } from 'next/navigation';

export default function Page() {
  const searchParams = useSearchParams();
  const searchTerm = searchParams.get('search') || '';

  return (
    <div>
      <h1 id="Search-Results-for-searchTerm">Search Results for: {searchTerm}</h1>
      {/* Render search results based on the searchTerm */}
    </div>
  );
}

这确保了代码分割

是动态完成的，仅在需要时加载组件和路由。

86. App Router 如何支持路由组，它们的用途是什么？

在 App Router 中，路由组 提供了一种组织路由和应用 布局、共享组件 或 中间件

到某些页面组而不修改URL结构。

路线组有何用途？

• 对路由进行逻辑分组
：路由组允许开发人员在应用程序中创建逻辑划分，同时保持干净的 URL 结构。
• 共享布局或组件
：您可以将共享布局应用于多个路由，而不影响 URL。例如，共享公共侧边栏或标题的一组页面可以在单个布局下分组在一起。
• 嵌套布局
：路由组支持嵌套布局，以便更精细地控制页面结构，例如管理页面或公共页面的不同布局。

路线组示例
：

import dynamic from 'next/dynamic';

const DynamicComponent = dynamic(() => import('./DynamicComponent'), {
  loading: () => <p>Loading...</p>,
});

export default function Page() {
  return (
    <div>
      <h1 id="Page-with-dynamic-component">Page with dynamic component</h1>
      <dynamiccomponent></dynamiccomponent>
    </div>
  );
}

在此示例中：

• 仪表板/、管理/和公共/代表页面的逻辑分组。
• 您可以为每个组分配特定的布局，例如为管理员/组分配 AdminLayout 或为公共/组分配 PublicLayout。

如何创建路由组:
路由组是使用 () 创建的，允许您在不更改实际路由路径的情况下构建应用程序：

import { use } from 'react';

function MyComponent() {
  const data = use(fetchData()); // fetchData is a promise
  return <div>{data}</div>;
}

在这种情况下，URL 路径不包含 (admin) 或 (public)，但它允许您将路由组织在不同的部分下。

摘要：

• 处理搜索参数：您可以使用 useSearchParams 动态访问 App Router 中的搜索参数，或者直接访问服务器端代码中的查询字符串。
• 代码拆分：App Router 根据路由、组件、页面自动拆分代码，支持 SSR 和 CSR 以提高性能。
• 路由组：这些有助于逻辑地组织路由，同时保持干净的 URL 结构、支持共享布局并启用复杂的路由配置。

87. 使用 App Router 组织大型 Next.js 项目的最佳实践是什么？

使用 App Router 组织大型 Next.js 项目时，关注可扩展性、可维护性和模块化非常重要。以下是构建和组织大型项目的一些最佳实践：

1。使用应用程序路由器的 app/ 目录

使用 Next.js 13 和 App Router，使用 app/ 目录而不是传统的 Pages/ 目录进行路由。这允许更高级的路由功能，例如嵌套路由、布局和并行路由，这对于大型项目至关重要。

• 目录结构:

  • 对目录和文件使用清晰一致的命名约定。根据功能构建您的应用程序，例如为应用程序的不同模块或部分设置单独的文件夹。

  • 示例：
    

    import { useSearchParams } from 'next/navigation';
    
    export default function Page() {
      const searchParams = useSearchParams();
      const searchTerm = searchParams.get('search') || '';
    
      return (
        <div>
          <h1 id="Search-Results-for-searchTerm">Search Results for: {searchTerm}</h1>
          {/* Render search results based on the searchTerm */}
        </div>
      );
    }
    
    

2。使用通用 UI 布局

利用布局避免重复并在应用程序的不同页面或部分保持一致的设计。布局有助于共享导航栏、页脚或侧边栏等 UI 组件，而无需重复代码。

• 示例：
  

  import dynamic from 'next/dynamic';
  
  const DynamicComponent = dynamic(() => import('./DynamicComponent'), {
    loading: () => <p>Loading...</p>,
  });
  
  export default function Page() {
    return (
      <div>
        <h1 id="Page-with-dynamic-component">Page with dynamic component</h1>
        <dynamiccomponent></dynamiccomponent>
      </div>
    );
  }
  
  

1. 将功能拆分为模块（基于功能的结构）

基于功能的方法来组织项目可以更轻松地扩展和维护。每个功能都可以有自己的目录，其中包含必要的组件、挂钩和实用函数。

• 示例：
  

  import { use } from 'react';
  
  function MyComponent() {
    const data = use(fetchData()); // fetchData is a promise
    return <div>{data}</div>;
  }
  
  

1. 保持 API 路由井井有条

使用app/api/目录来处理API路由。根据相关功能或领域来组织它们。这将帮助您保持代码模块化并更易于管理。

• 示例：
  

  import { useSearchParams } from 'next/navigation';
  
  export default function Page() {
    const searchParams = useSearchParams();
    const searchTerm = searchParams.get('search') || '';
  
    return (
      <div>
        <h1 id="Search-Results-for-searchTerm">Search Results for: {searchTerm}</h1>
        {/* Render search results based on the searchTerm */}
      </div>
    );
  }
  
  

1. 使用 TypeScript 进行强类型

对于较大的项目，强烈建议使用 TypeScript，因为它可以提高代码质量、提供自动完成功能并减少运行时错误。定义 props、states 和 API 响应的类型，以确保更好的可维护性和可扩展性。

• 示例：
  

  import dynamic from 'next/dynamic';
  
  const DynamicComponent = dynamic(() => import('./DynamicComponent'), {
    loading: () => <p>Loading...</p>,
  });
  
  export default function Page() {
    return (
      <div>
        <h1 id="Page-with-dynamic-component">Page with dynamic component</h1>
        <dynamiccomponent></dynamiccomponent>
      </div>
    );
  }
  
  

1. 利用 API 中间件

对于共享逻辑（例如身份验证检查、日志记录或缓存），请在 app/api/ 目录中使用 中间件 以避免跨多个 API 路由重复逻辑。

• 示例：
  

  /app/
    ├── dashboard/
    │   └── page.js
    ├── admin/
    │   └── page.js
    └── public/
        └── page.js
  
  

1. 优化数据获取和缓存

对于需要实时或动态数据的页面使用增量静态生成（ISR）或服务器端渲染（SSR），对于需要实时或动态数据的页面使用静态生成（getStaticProps）不经常改变。将此与缓存和后台再生相结合，以实现高效的数据获取。

• 示例：
  

  /app/
    ├── (admin)/
    │   └── page.js  // Admin group route
    ├── (public)/
    │   └── page.js  // Public group route
  
  

1. 使用自定义挂钩实现可重用逻辑

将可重用逻辑（例如数据获取、表单处理或状态管理）封装到自定义挂钩中。这可以帮助您保持干净、干燥的代码，同时避免组件之间的重复。

• 示例：
  

  app/
  ├── dashboard/
  │   ├── page.js        # Dashboard main page
  │   ├── settings/      # Nested route
  │   │   └── page.js
  ├── auth/              # Authentication-related pages
  │   ├── login/
  │   └── register/
  ├── user/
  │   ├── profile/
  │   └── account/
  └── layout.js          # Layout for the whole app
  
  

1. 利用代码分割和延迟加载

对于大型 Next.js 应用程序，使用 动态导入 进行代码分割和延迟加载不需要立即使用的组件。这减少了初始包大小并提高了性能。

• 示例：
  

  // app/layout.js
  export default function Layout({ children }) {
    return (
      <div>
        <header></header>
        <main>{children}</main>
        <footer></footer>
      </div>
    );
  }
  
  

1. 认真实施全局状态管理

在大型 Next.js 应用程序中，使用 React Context、Redux 或 Zustand 进行状态管理可能至关重要。但是，请注意状态的存储位置并避免状态管理过于复杂，特别是当应用程序只有一小部分需要访问它时。

• 使用 React Context 的示例:
  

  app/
  ├── dashboard/
  │   ├── components/
  │   ├── hooks/
  │   ├── utils/
  │   └── page.js
  ├── user/
  │   ├── components/
  │   ├── hooks/
  │   └── page.js
  
  

摘要：

• 使用 app/ 目录进行路由和布局。
• 将功能组织到模块中以便于维护。
• 在 app/api/ 目录中组织 API 路由。
• 利用 TypeScript 实现强类型。
• 使用中间件跨 API 路由共享逻辑。
• 使用 SSR、SSG 和 ISR 优化数据获取。
• 利用自定义挂钩实现可重用逻辑。
• 通过动态导入应用代码分割。
• 使用 React Context 或状态管理库仔细管理全局状态。

遵循这些最佳实践有助于使用 App Router 维护大型 Next.js 应用程序的干净、可扩展和高性能代码。

88. 在 Next.js 中实现注册/登录功能的主要步骤是什么？

• 捕获用户凭据：创建一个在提交时调用服务器操作的表单。
• 在服务器上验证表单字段：使用 Zod 或 Yup 等模式验证库。
• 创建用户帐户：将用户插入数据库或调用Auth Library的API。
• 创建用户会话：使用会话管理策略管理用户的身份验证状态。

89. 如何在 Next.js 中管理会话？

• 无状态会话：使用 Iron-Session 或 Jose 等库来创建和管理会话。
• 数据库会话：将会话数据存储在数据库中并使用cookie进行乐观身份验证检查。

90. Next.js 身份验证中中间件的作用是什么？

• 中间件可用于初始检查，根据用户的身份验证状态重定向用户。它应该从 cookie 读取会话并避免数据库检查以防止性能问题。

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