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

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 开发人员？并自信地踏入下一个职业机会！

在此示例中，next/image 组件会自动优化和调整图像，以获得更好的性能和响应能力。

26. Next.js 中的重写是什么，它们是如何工作的？

在 Next.js 中，重写 用于更改传入请求的目标 URL，而不更改浏览器中显示的 URL。此功能对于创建更清晰、更用户友好的 URL、将流量重定向到外部 API 或在客户端与服务器端以不同的方式构造 URL 非常有用。

重写如何工作：

• 配置：重写在异步重写函数中的 next.config.js 文件中定义，该函数返回重写规则数组。
• 目标 URL 更改：当用户看到像 /blog/post 这样的 URL 时，请求可以重写为内部或外部 URL，例如 /api/post。
• 隐藏重定向：与重定向不同，重写将原始 URL 保留在浏览器中，为用户提供无缝体验。

重写示例：

// next.config.js
module.exports = {
  async rewrites() {
    return [
      {
        source: '/blog/:slug',
        destination: '/api/post/:slug' // proxies the request to /api/post/:slug
      },
    ];
  },
};

在此示例中，当用户导航到 /blog/awesome-post 时，请求实际上由 /api/post/awesome-post 处理，而 /blog/awesome-post 在浏览器中仍然可见。

重写用例：

• API 代理：重写 URL 以将其路由到外部 API，而不暴露实际的 API 端点。
• 自定义 URL 结构：将用户友好的 URL 映射到复杂的底层路由，简化导航。
• 多语言路由：重写路径以提供不同语言的内容，而不改变可见的 URL 结构。

27. next.config.js 文件是什么，它的作用是什么？

next.config.js 文件是 Next.js 项目中的核心配置文件。它控制 Next.js 应用程序的各种设置，包括构建设置、环境变量、路由和其他优化。该文件允许开发人员修改 Next.js 默认值，从而可以根据项目的要求进行自定义。

next.config.js 的关键角色：

1. 自定义构建：
   • 输出目录：您可以更改构建和静态导出的输出路径。
   • Webpack 配置：它允许扩展或覆盖 Webpack 配置，启用自定义模块处理或加载器设置。
2. 环境变量：
   • next.config.js 通常用于定义不同环境的环境变量（例如，开发与生产）。这对于以结构化方式设置 API URL、身份验证密钥或其他敏感信息非常有用。
3. 国际化 (i18n)：
   • 该文件提供了 i18n 配置，用于设置多语言网站的语言区域设置、默认语言和 URL 结构。
4. 路由定制：
   • 重写：定义重写以更改传入请求的目的地，启用自定义 URL 结构或 API 代理，而无需暴露真实端点。
   • 重定向：设置 URL 重定向以自动将用户从一个路径重新路由到另一路径。
   • Headers：配置自定义标头，例如与安全相关的标头（例如 Content-Security-Policy）以增强应用程序安全性。
5. 性能优化：
   • 您可以控制特定的 Next.js 优化，例如启用 React 严格模式、配置图像优化和微调压缩选项。
   • 静态和动态页面优化：next.config.js 允许配置静态站点生成（SSG）、服务器端渲染（SSR）和增量静态重新生成（ISR）。
6. 实验特性：
   • Next.js 经常引入可以通过 next.config.js 启用的实验性功能。例如，您可以在早期版本中启用并发功能或 App Router 的实验配置来尝试新功能。

next.config.js 示例：

// next.config.js
module.exports = {
  async rewrites() {
    return [
      {
        source: '/blog/:slug',
        destination: '/api/post/:slug' // proxies the request to /api/post/:slug
      },
    ];
  },
};

在此示例中：

• reactStrictMode 通过启用 React 的严格模式来改进错误检测。
• 环境变量设置用于访问API。
• 国际化 配置了多个区域设置。
• 重写和重定向修改URL在应用程序内的路由方式。
• 图像域指定用于优化从外部源加载的图像。

next.config.js 文件在自定义和优化 Next.js 应用程序中发挥着至关重要的作用，使开发人员能够广泛控制应用程序行为、构建和部署设置。

28. Next.js 如何处理图像优化？

Next.js 通过 提供内置的图像优化组件，旨在通过根据用户的设备和屏幕尺寸自动优化图像来提高性能和加载时间。此功能允许图像快速加载而不牺牲质量，从而增强用户体验和 SEO。

Next.js 图像优化的工作原理：

1. 自动调整大小：
   • ;组件检测设备的屏幕尺寸并提供适当尺寸的图像。这减少了下载的数据量，尤其是在较小的屏幕上。
2. 响应式和布局选项：
   • 通过填充、响应式和内在等属性，您可以指定图像在各种屏幕尺寸上的表现方式。该组件可以无缝处理响应式图像，从而更轻松地构建适应不同设备的布局。
3. 自动格式转换：
   • Next.js 在浏览器支持的情况下以现代格式（例如 WebP）提供图像。 WebP 文件通常比传统 JPEG 或 PNG 格式更小且加载速度更快，从而减少了页面加载时间。
4. 延迟加载：
   • 图像默认是延迟加载的，这意味着它们仅在出现在视口中时加载。这减少了初始页面加载时间，特别是对于包含许多图像的页面。
5. 缓存：
   • Next.js 缓存优化的图像，以避免对每个请求进行重新优化，从而减少服务器负载并提高速度。缓存的图像存储在服务器本地或 CDN（内容分发网络）（如果配置）中。
6. 支持外部图像：
   • Next.js 允许您通过配置 next.config.js 中的domains 选项从外部域加载图像。这对于从 CDN 或其他外部源加载图像非常有用。

的关键属性组件：

• src：图片来源，可以是本地路径，也可以是外部URL。
• 宽度和高度：定义图像的大小，静态图像需要它来帮助 Next.js 优化布局变化。
• 布局：控制图像的行为方式。选项包括：
  • fill：允许图像缩放以填充其容器。
  • 响应式：提供根据视口宽度缩放的响应式图像。
  • 内在：调整图像的内在尺寸，但在这些尺寸的范围内响应。
• 优先级：允许您优先加载关键图像，对于英雄图像或首屏内容很有用。

用法示例：

// next.config.js
module.exports = {
  async rewrites() {
    return [
      {
        source: '/blog/:slug',
        destination: '/api/post/:slug' // proxies the request to /api/post/:slug
      },
    ];
  },
};

在 next.config.js 中配置图像优化：

在next.config.js中，您可以自定义图像优化设置。例如：

// next.config.js
module.exports = {
  reactStrictMode: true,
  env: {
    API_URL: process.env.API_URL,
  },
  i18n: {
    locales: ['en', 'es', 'fr'],
    defaultLocale: 'en',
  },
  async rewrites() {
    return [
      {
        source: '/blog/:slug',
        destination: '/api/posts/:slug',
      },
    ];
  },
  async redirects() {
    return [
      {
        source: '/old-blog/:slug',
        destination: '/blog/:slug',
        permanent: true,
      },
    ];
  },
  images: {
    domains: ['example.com'],
  },
};

Next.js 图像优化的优点：

• 减少页面加载时间：通过提供更小的、优化的图像，页面加载时间显着减少。
• 改进 SEO 和核心 Web Vitals：更快的图像加载时间可改善 LCP（最大内容绘制）等核心 Web Vitals 指标，从而影响 SEO。
• 自动延迟加载：最初仅加载视口中的图像，从而加快页面加载时间。

Next.js 图像优化是一项强大的功能，可以在幕后处理复杂的任务，以最少的开发人员精力提高性能。

29. Next.js的混合渲染是什么？

Next.js 的混合渲染指的是能够组合不同渲染策略的能力——静态生成（SSG）、服务器端渲染（SSR）、和客户端渲染（CSR）——在同一个应用程序中。这种灵活性允许开发人员根据每个页面或组件的具体要求使用最高效的渲染策略。

• 静态生成（SSG）：页面在构建时预渲染。非常适合不经常更改的内容，例如营销页面。
• 服务器端渲染（SSR）：根据每个请求渲染页面，确保内容始终是最新的。对于经常更改的用户特定数据或内容很有用。
• 客户端渲染 (CSR)：在客户端获取和渲染内容，通常用于不需要预渲染的交互功能或数据。

通过 App Router，Next.js 还支持 增量静态再生 (ISR)，其中静态生成的页面可以在运行时更新，而无需重建整个站点。这种混合渲染设置提供了一种平衡性能和数据新鲜度的通用方法。

30. Next.js 中混合渲染的主要好处是什么？

Next.js 中混合渲染的主要好处包括：

1. 优化性能：通过使用 SSG 处理动态较少的内容，页面加载速度更快并提高性能指标，例如 Core Web Vitals。 SSR 是为需要频繁更新数据的页面保留的，保证新鲜度而不影响整个站点。
2. SEO 灵活性：受益于 SEO 的页面可以使用 SSG 或 SSR，允许搜索引擎索引完全呈现的 HTML。通过混合渲染，Next.js 应用程序可以逐页优化 SEO。
3. 改进的用户体验：在预渲染页面中使用 CSR 进行交互组件可以创建更快的页面加载速度，同时允许用户进行动态交互。
4. 高效的资源使用：ISR 通过仅重新生成特定页面而不是整个网站来最大限度地减少服务器负载，从而更轻松地保持内容更新而不影响性能。
5. 可扩展性：混合渲染可让您自定义不同类型页面的渲染，使 Next.js 应用程序具有高度可扩展性。

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