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

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

指定尺寸：始终指定图像的宽度和高度属性，以避免布局变化。

延迟加载图像：默认情况下，图像是延迟加载的，这意味着它们仅在视口中可见时才加载。这可以提高性能。

使用外部图像提供程序：如果您使用外部图像 CDN（如 Cloudinary 或 Imgix），请在 next.config.js 中配置 Next.js 以支持它：

module.exports = {
  images: {
    domains: ['example.com', 'cdn.example.com'],
  },
};

响应式图像：使用尺寸为不同视口定义不同的图像尺寸。

69. 如何在 Next.js 中使用 JWT 处理用户身份验证？

要在 Next.js 中使用 JWT（JSON Web 令牌）处理用户身份验证，通常需要执行以下步骤：

1. 存储JWT：登录后，将JWT存储在cookie或localStorage中。
   • Cookie 是存储令牌的首选方法，因为它们会随每个请求自动发送。

2. 在 HTTP 标头中设置 JWT：对于 API 请求，在授权标头中发送 JWT。
   

   const response = await fetch('/api/protected', {
     headers: {
       'Authorization': `Bearer ${token}`,
     },
   });
   
   

3. 在服务器上验证 JWT：在 API 路由或中间件中，在访问受保护资源之前验证 JWT。
   

   import jwt from 'jsonwebtoken';
   
   export async function handler(req, res) {
     const token = req.headers.authorization?.split(' ')[1];
     if (!token) return res.status(401).json({ message: 'Unauthorized' });
   
     try {
       const decoded = jwt.verify(token, process.env.JWT_SECRET);
       req.user = decoded; // Attach the decoded user to the request
       next();
     } catch (err) {
       return res.status(401).json({ message: 'Invalid token' });
     }
   }
   
   

4. 使用 cookie 进行持久登录：您可以使用 JWT 设置仅 HTTP 的 cookie，以便用户在多个会话中保持身份验证。

70. 如何在 Next.js 中处理授权？

Next.js 中的授权通常涉及在成功验证后检查用户的角色或权限级别。以下是一些方法：

1. 基于角色的授权：用户登录后，您将其角色存储在 JWT 中，并在用户尝试访问受保护的路由时检查它。
   

   export async function handler(req, res) {
     const token = req.cookies.token;
     if (!token) return res.status(403).json({ message: 'Forbidden' });
   
     const decoded = jwt.verify(token, process.env.JWT_SECRET);
     if (decoded.role !== 'admin') {
       return res.status(403).json({ message: 'Forbidden' });
     }
     // Proceed with handling the request
   }
   
   

2. 自定义授权中间件：您可以创建自定义中间件来在提供某些页面或 API 路由之前检查用户是否具有所需的权限。

3. 重定向未经授权的用户：对于SSR或SSG页面，您可以使用getServerSideProps检查用户是否被授权，如果没有则重定向他们。
   

   export async function getServerSideProps(context) {
     const token = context.req.cookies.token;
     if (!token) {
       return { redirect: { destination: '/login', permanent: false } };
     }
     return { props: {} };
   }
   
   

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