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中文網其他相關文章！