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

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

11. Next.js 中的静态渲染（SSG）和服务器渲染（SSR）有什么区别

在Next.js中，静态渲染（SSG）和服务器渲染（SSR）都是用于预渲染页面的方法。 静态渲染 (SSG) 在构建期间生成页面并将其作为静态 HTML 文件提供，这对于不经常更改的内容来说是最佳选择。另一方面，服务器渲染 (SSR) 在请求时渲染页面，使其非常适合需要根据每个请求更新的动态内容。

方面 静态渲染（SSG） 服务器渲染 (SSR) 标题>

Aspect	Static Rendering (SSG)	Server Rendering (SSR)
Rendering Time	At build time	At request time
Use Case	Ideal for static content that doesn’t change often	Best for dynamic content that needs frequent updates
Performance	Very fast, as pages are pre-built and cached	Slower initial load, as pages are rendered per request
SEO	Good for SEO, as the pages are pre-rendered	Good for SEO, but response time is longer
Data Fetching	Data is fetched at build time using static methods	Data is fetched on each request via server-side functions
Content Update	Content does not update after build unless manually rebuilt	Content is always up-to-date with each request
Caching	Cached globally and served as static files	May involve limited caching, but always re-renders
Typical Use Cases	Blogs, marketing sites, documentation	Dashboards, user-specific data, live data feeds

渲染时间 构建时 在请求时 用例 非常适合不经常更改的静态内容 最适合需要频繁更新的动态内容 性能 非常快，因为页面是预先构建和缓存的 初始加载速度较慢，因为页面是根据请求呈现的 搜索引擎优化 有利于搜索引擎优化，因为页面是预先渲染的 有利于 SEO，但响应时间较长 数据获取 在构建时使用静态方法获取数据 通过服务器端函数根据每个请求获取数据 内容更新 除非手动重建，否则内容在构建后不会更新 每次请求内容始终是最新的 缓存 全局缓存并作为静态文件 可能涉及有限的缓存，但总是重新渲染 典型用例 博客、营销网站、文档 仪表板、用户特定数据、实时数据源 表>

12. Next.js 中的应用程序路由器是什么？

Next.js 13 中引入的 App Router 是一种在 Next.js 应用程序中管理路由的新方法。与之前的页面目录（其中每个文件代表一个路由）不同，应用程序路由器使用应用程序目录并利用基于文件的路由系统，该系统默认支持嵌套布局和服务器组件。这允许更高级的功能，例如嵌套路由、更好的代码分割以及不同路由级别的布局。

13. 布局如何与 App Router 配合使用？

在app目录中，布局是使用任意级别的layout.js文件定义的。这些文件充当该目录中所有嵌套路由的根布局，使开发人员能够在各个级别设置布局，这些布局在页面转换中持续存在并使组件重用更简单。例如， /app/dashboard/layout.js 中的布局将应用于 /app/dashboard 目录中的所有页面。

14.app目录和pages目录有什么区别？

Next.js 13 中引入的应用程序目录支持应用程序路由器，并提供默认服务器组件、嵌套布局和更好的数据获取策略等功能。以前的 Next.js 版本中使用的页面目录遵循更简单的基于文件的路由结构，没有嵌套布局，并且默认情况下需要客户端组件。 Next.js 允许两个目录共存，但 app 目录在构建复杂应用程序时提供了更大的灵活性和效率

15. Next.js 中的服务器组件和客户端组件是什么？

在 Next.js 中，组件分为 服务器组件 和 客户端组件，每个组件在应用程序架构中都有特定的用途。服务器组件通过在服务器上呈现来优化性能，从而最大限度地减少需要发送到客户端的 JavaScript 量。它们非常适合不需要用户交互的静态内容和数据获取场景。另一方面，客户端组件支持交互性并在客户端呈现。这些对于处理基于浏览器的事件和用户输入至关重要。

这是服务器组件和客户端组件之间的比较：

Feature	Server Components	Client Components
Rendering	Rendered on the server, minimizing the JavaScript sent to the client	Rendered on the client, required for handling interactivity and browser events
Performance	Optimized for performance, reducing client-side JavaScript and improving load times	Generally adds more JavaScript to the client bundle, affecting load times
Data Fetching	Can directly fetch data on the server, which reduces client-side API calls and bundle size	Requires client-side data fetching, typically using libraries like useEffect or SWR
Interactivity	Non-interactive by default, suitable for static data and UI elements that don’t require user interaction	Supports interactive elements, such as forms, buttons, and any components requiring user input
Usage	Default component type in the app directory, suitable for components not needing client interaction	Defined by adding "use client" at the top of a component file, enabling client-side interaction
Primary Benefits	Reduces JavaScript bundle size, improves SEO, and enhances performance for static content	Adds interactivity, handles user events, and is essential for dynamic, user-driven actions
Example Use Cases	Static content display, server-side data fetching, SEO-friendly components	Forms, modals, dropdowns, and other interactive UI elements

16. 与传统的客户端渲染相比，Next.js 如何改进 SEO？

与传统的客户端渲染 (CSR) 相比，Next.js 通过利用

服务器端渲染 (SSR) 和 静态站点生成 (SSG) 等功能，改进了 SEO（搜索引擎优化） ，它允许搜索引擎更有效地抓取和索引内容。方法如下：

1. 服务器端渲染 (SSR):

• 在服务器上预渲染：通过 SSR，Next.js 在服务器上为每个请求生成 HTML。当搜索引擎抓取页面时，它会收到完全渲染的 HTML，而不是空壳（如 CSR），从而使搜索引擎更容易准确地索引内容。
• 更快的内容交付：由于 HTML 已经预先渲染，因此内容可以立即提供给搜索引擎，而不是像 CSR 中那样等待 JavaScript 执行。

1. 静态站点生成 (SSG):

• 构建时预渲染：SSG 允许 Next.js 在构建过程中为每个页面生成静态 HTML 文件，然后将其提供给用户和爬虫。这些预渲染的页面可以被搜索引擎完全索引，无需依赖 JavaScript 执行。
• 改善加载时间：直接提供静态页面，从而加快加载时间，这是 SEO 排名的关键因素。

1. 增量静态再生 (ISR):

• 按需静态再生：Next.js 的 ISR 功能允许静态页面在构建和部署后进行更新。这意味着无需重建整个网站即可更新内容，通过确保爬虫和用户可以使用新鲜内容来改进 SEO。
• 可扩展性：ISR 允许静态生成数百万个页面，从而可以轻松维护具有动态内容的大型网站，同时仍然提供快速、可索引的页面。

1. 提高页面速度：

• 优化资源：Next.js 自动优化 JavaScript、CSS 和图像以提高性能。更快的加载时间不仅可以提供更好的用户体验，还可以直接影响 SEO，因为搜索引擎（例如 Google）会将快速加载的网站排名更高。
• 自动代码分割：Next.js 自动将 JavaScript 分割成更小的块，因此用户只下载他们需要的代码。这减少了初始页面加载时间，从而提高了性能指标，例如首次内容绘制（FCP）和最大内容绘制（LCP），重要的排名因素。

1. 元标签和开放图谱支持：

• 动态元标签：Next.js 允许您在每个页面上轻松设置动态元标签，包括标题、描述和社交共享数据。这对于 SEO 至关重要，因为搜索引擎使用这些标签来理解页面的内容并在搜索结果中正确呈现它。
• SEO 友好的 URL 结构：Next.js 支持干净、可读的 URL，更容易让搜索引擎索引和理解。

1. 使用预渲染内容更好地抓取：

• 搜索引擎友好的 HTML：使用 SSR 或 SSG，爬虫可以立即完全获取 HTML 内容，这意味着它们无需执行 JavaScript 来渲染页面。这提高了内容被正确索引的可能性，特别是对于具有动态内容的页面，否则在基于 CSR 的应用程序中可能会丢失这些内容。
• 减少 JavaScript 依赖性：由于内容是预渲染的，搜索引擎不依赖于 JavaScript 执行，确保内容可靠地索引。

1. 链接预取:

• next/link 预取：当用户将鼠标悬停在链接上时，Next.js 会在后台自动预取链接页面，因此当他们单击时，该页面立即可用。这会带来更快的导航，改善用户体验并间接有利于 SEO（通过减少页面加载时间）。

1. 丰富的片段和结构化数据：

• JSON-LD：Next.js 可以轻松地为搜索结果中的丰富摘要添加结构化数据 (JSON-LD)。通过提供结构化数据（如评论、价格或文章），Next.js 网站可以利用富媒体增强搜索结果，提高点击率 (CTR) 和 SEO。

1. 自定义错误页面:

• 自定义 404 页面：使用 Next.js，您可以创建自定义 404 页面，该页面可以在页面丢失或链接损坏时改善用户体验，这有助于降低跳出率——这是另一个因素可以对 SEO 产生积极影响。

17. Next.js 如何处理环境变量？

Next.js 通过读取 .env.local（或通用变量的 .env）文件并将变量暴露给客户端和服务器端来处理 App Router 中的环境变量。

• 服务器端变量：可以直接在API路由或服务器组件中访问。这些可以在 app/api/route.js 等文件中找到。
• 客户端变量：要将环境变量公开给客户端，必须在它们前面加上 NEXT_PUBLIC_ 前缀。

示例：

// .env.local
DATABASE_URL=your-database-url
NEXT_PUBLIC_API_URL=https://api.example.com

在您的 Next.js 代码中：

• 服务器端：process.env.DATABASE_URL
• 客户端：process.env.NEXT_PUBLIC_API_URL

这确保数据库凭据等敏感信息保留在服务器端，而公共数据可以在客户端访问。

18.如何在Next.js中创建动态API路由？

在带有 App Router 的 Next.js 13 中，动态 API 路由是通过定义文件夹结构并在文件名中使用 动态段 创建的。

• 在 app/api 目录中为您的 API 路由创建一个文件夹。
• 使用方括号 ([param]) 定义文件名中的动态段。

示例：

// .env.local
DATABASE_URL=your-database-url
NEXT_PUBLIC_API_URL=https://api.example.com

在这种情况下，id 是一个动态参数，您可以在 API 处理程序中访问它，如下所示：

/api/products/[id]/route.js

向 /api/products/1 发出请求时，id 将为 1。

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

Next.js 中的中间件允许您在请求完成之前运行代码，例如修改请求、重定向用户或添加自定义标头。

在 App Router 中，中间件是使用应用程序目录中的 middleware.js 文件定义的。它在服务器端和客户端请求上运行。

• 位置：您可以在根目录或特定文件夹（例如 app/dashboard/middleware.js）中创建 middleware.js 文件。
• 用途：它可以执行检查（例如身份验证）、重定向用户或重写 URL。

示例：

export async function GET(request, { params }) {
  const { id } = params;
  return new Response(`Product ID: ${id}`);
}

中间件可以通过指定路径模式应用于特定路由：

// app/middleware.js
export function middleware(request) {
  const token = request.cookies.get('auth-token');
  if (!token) {
    return new Response('Unauthorized', { status: 401 });
  }
  return NextResponse.next();
}

20. 什么是 React Server 组件，它们在 Next.js 中如何使用？

React 服务器组件 (RSC) 是 React 中的一项功能，允许在服务器上渲染组件，而不需要在客户端运行 JavaScript。这有助于减少发送到浏览器的 JavaScript 数量，提高性能并缩短页面加载时间。

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