Next.js 面試掌握：基本問題（第 4 部分）

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

31. 解釋 Next.js 中資料取得的工作原理。

Next.js 支援多種資料取得方式，根據渲染方式有不同的選項：

在應用程式路由器中：

1. 取得伺服器元件:

   • 伺服器元件可以直接使用 fetch 來檢索資料。由於這些元件在伺服器上呈現，因此您無需擔心捆綁敏感資料或增加客戶端 JavaScript 負載。

   // app/dashboard/page.js
   export default async function Dashboard() {
     const res = await fetch('<https:>');
     const data = await res.json();
   
     return <div>{data.message}</div>;
   }
   
   </https:>

2. 用於懸疑：

   • React Suspense API 中的 use hook 允許在元件中延遲獲取，從而實現更流暢的載入體驗的資料擷取。

   import { use } from 'react';
   
   async function getData() {
     const res = await fetch('<https:>');
     return res.json();
   }
   
   export default function Page() {
     const data = use(getData());
     return <div>{data.message}</div>;
   }
   
   </https:>

3. 使用 useEffect 或 React Query 進行客戶端取得:

   • 在客戶端元件中，您可以使用傳統的客戶端取得方法（如 useEffect）或函式庫（如 React Query）在初始渲染後取得資料。
   • 這種方式適合不需要SEO友善或更新頻繁的資料。

4. 動態渲染模式（SSR、ISR）:

   • 透過在取得請求中新增特定標頭（例如，對於SSR，cache: 'no-store' 或對於帶有ISR 的SSG，cache: 'force-cache'），您可以控制Next.js 如何緩存和提供數據。

32. 如何管理 Next.js 應用程式中的狀態？

Next.js 中的狀態管理可以透過多種方法實現，具體取決於應用程式的複雜性和範圍：

1. React 的內建狀態：
   • 對於中小型應用程序，在客戶端元件中使用 useState 和 useReducer 就足夠了。 React 內建的狀態管理在許多場景下可以有效地處理本機狀態。
2. 上下文API：
   • Next.js 支援 React Context API，這對於管理跨元件的全域狀態非常有用，而無需外部程式庫。然而，上下文最適合相對靜態的全域數據，因為頻繁更新會影響效能。
3. 外部狀態管理函式庫（Redux、Zustand、Jotai）：
   • Redux：Redux 是大型應用程式的熱門選擇，它允許跨客戶端元件進行可預測的狀態管理。如果需要，Redux 可以配置為與 Next.js SSR 一起使用，儘管它通常對於客戶端互動更有用。
   • Zustand 或 Jotai：與 Next.js 整合良好的輕量級程式庫。它們比 Redux 更簡單，通常是需要全域狀態但不具備 Redux 全部複雜性的應用程式的首選。
4. 反應查詢：
   • 對於管理伺服器狀態（從 API 取得的資料），React Query 是一個強大的工具。它處理快取、後台獲取和同步，非常適合需要頻繁重新驗證或刷新資料的 Next.js 應用程式。
   • React Query 在 App Router 中用於客戶端資料取得特別有用，因為它可以簡化伺服器同步資料的狀態和資料管理過程。
5. 伺服器元件：
   • 伺服器元件可以透過在伺服器層級預先渲染資料來幫助減少對客戶端狀態管理的需求。對於不需要在客戶端互動或動態變化的數據，伺服器元件是在伺服器端管理狀態的有效解決方案。

33. Next.js 中的中間件是什麼，它是如何運作的？

Next.js 中的中間件是一個在請求完成之前執行的函數。它允許開發人員在應用程式呈現頁面之前執行程式碼、修改請求，甚至重寫或重新導向 URL。中間件對於處理身份驗證、日誌記錄和基於地理位置的重定向等任務非常有用。

• 工作原理：中間件在靠近使用者的邊緣運行，以實現更快的處理速度。它在位於根目錄或特定路由目錄中的 middleware.js 檔案中定義。收到請求後，中間件會檢查條件並可以回應、重新導向或允許請求繼續傳送到原始目的地。

範例：

// app/dashboard/page.js
export default async function Dashboard() {
  const res = await fetch('<https:>');
  const data = await res.json();

  return <div>{data.message}</div>;
}

</https:>

34. Next.js 中的路由是如何運作的？

Next.js 使用基於檔案的路由，其中應用程式目錄中的檔案結構定義應用程式的路由。透過 App Router，Next.js 支援巢狀路由、佈局和路由分組，以建立強大且可擴展的路由結構。

• 頁面路由：以 page.js 結尾的檔案定義路由。例如 app/about/page.js 對應 /about.
• 動態路由：使用方括號定義動態路由（例如，[id]/page.js 表示 /product/[id]）。
• 路由組和佈局：使用嵌套佈局和分組來組織路由，以保持 URL 結構整潔有序。

35. 如何在 Next.js 中處理巢狀路由？

Next.js 中使用 App Router 的巢狀路由是透過資料夾結構和版面配置檔案的使用來實現的：

• 資料夾結構：將 page.js 檔案放置在子資料夾中會建立巢狀路由。例如，app/blog/post/page.js 將會對應到 /blog/post。
• 版面配置：資料夾中的layout.js 檔案將持久性佈局套用至所有巢狀路由。例如，放置 app/blog/layout.js 將佈局套用至部落格目錄中的所有頁面。

結構範例：

import { use } from 'react';

async function getData() {
  const res = await fetch('<https:>');
  return res.json();
}

export default function Page() {
  const data = use(getData());
  return <div>{data.message}</div>;
}

</https:>

36. Next.js 專案中公共資料夾的用途是什麼？

public資料夾用於儲存客戶端可直接存取的靜態資源，如圖像、字體、圖示等。公共文件可以在瀏覽器中透過 /filename 存取。此資料夾有助於組織靜態文件，而無需將它們捆綁到 JavaScript 套件中，從而提高效能。

37. 如何在 Next.js 中建立自訂 500 錯誤頁面？

要在 App Router 中建立自訂 500 錯誤頁面，請在根層級或特定路由資料夾中新增 error.js 檔案：

// middleware.js
import { NextResponse } from 'next/server';

export function middleware(request) {
  const token = request.cookies.get('authToken');
  if (!token) {
    return NextResponse.redirect(new URL('/login', request.url));
  }
}

每當伺服器端發生錯誤時都會顯示此檔案。

38. Next.js 中基於檔案的路由如何運作？

Next.js 中基於檔案的路由將 URL 對應到應用程式目錄中的檔案和資料夾。應用程式中的每個檔案或資料夾都定義了一個路由，並且特定的約定（例如 page.js 和 [param]）可以輕鬆定義靜態、動態和巢狀路由。

• 靜態路由：每個 page.js 檔案都會建立一個唯一的路由。
• 動態路由：用方括號定義（例如，[id].js 表示 /product/[id]）。
• 巢狀路由：按資料夾組織，允許深度嵌套和複雜的路由結構。

39. Next.js 中有哪些元件樣式選項？

Next.js 支援各種樣式選項：

1. CSS 模組：帶有 .module.css 檔案的模組化樣式表，用於將樣式範圍限定到特定元件。
2. CSS-in-JS：像 styled-components、Emotion 或內建的 @next/css 這樣的函式庫，用於直接在 JavaScript 檔案中編寫 CSS。
3. 全域 CSS：在 _app.js 中或透過 App Router 匯入的傳統全域樣式表。
4. Tailwind CSS：實用優先的 CSS 框架，與 Next.js 整合良好。
5. Sass/SCSS：透過安裝 sass 添加對 Sass 的支持，以實現其他 CSS 功能。

40. TypeScript 如何與 Next.js 搭配使用？

Next.js 內建了對 TypeScript 的支援。新增 tsconfig.json 檔案或使用 .tsx 檔案將自動在 Next.js 專案中設定 TypeScript。 Next.js 最佳化 TypeScript 整合、處理配置並提供開箱即用的類型定義。

以上是Next.js 面試掌握：基本問題（第 4 部分）的詳細內容。更多資訊請關注PHP中文網其他相關文章！