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