透過 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.js中，靜態渲染（SSG）和伺服器渲染（SSR）都是用於預渲染頁面的方法。 靜態渲染 (SSG) 在建置期間產生頁面並將其作為靜態 HTML 檔案提供，這對於不經常變更的內容來說是最佳選擇。另一方面，伺服器渲染 (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 |
Next.js 13 中引入的 App Router 是一種在 Next.js 應用程式中管理路由的新方法。與先前的頁面目錄（其中每個檔案代表一個路由）不同，應用程式路由器使用應用程式目錄並利用基於檔案的路由系統，該系統預設支援嵌套佈局和伺服器元件。這允許更高級的功能，例如嵌套路由、更好的程式碼分割以及不同路由層級的佈局。
在app目錄中，佈局是使用任意層級的layout.js檔案定義的。這些檔案可作為該目錄中所有嵌套路由的根佈局，使開發人員能夠在各個層級設定佈局，這些佈局在頁面轉換中持續存在並使元件重複使用更簡單。例如， /app/dashboard/layout.js 中的版面配置將會套用至 /app/dashboard 目錄中的所有頁面。
Next.js 13 中引入的應用程式目錄支援應用程式路由器，並提供預設伺服器元件、巢狀佈局和更好的資料擷取策略等功能。先前的 Next.js 版本中使用的頁面目錄遵循更簡單的基於檔案的路由結構，沒有巢狀佈局，並且預設需要客戶端元件。 Next.js 允許兩個目錄共存，但 app 目錄在建立複雜應用程式時提供了更大的靈活性和效率
在 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 |
伺服器端渲染(SSR) 和 靜態網站產生(SSG) 等功能，改進了SEO（搜尋引擎最佳化） ，它允許搜尋引擎更有效地抓取和索引內容。方法如下：
Next.js 透過讀取 .env.local（或通用變數的 .env）檔案並將變數暴露給客戶端和伺服器端來處理 App Router 中的環境變數。
範例：
// .env.local DATABASE_URL=your-database-url NEXT_PUBLIC_API_URL=https://api.example.com
在您的 Next.js 程式碼中：
這確保資料庫憑證等敏感資訊保留在伺服器端，而公用資料可以在客戶端存取。
在具有 App Router 的 Next.js 13 中，動態 API 路由是透過定義資料夾結構並在檔案名稱中使用 動態段 建立的。
範例：
// .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。
Next.js 中的中間件可讓您在請求完成之前執行程式碼，例如修改請求、重定向使用者或新增自訂標頭。
在 App Router 中，中間件是使用應用程式目錄中的 middleware.js 檔案定義的。它在伺服器端和客戶端請求上運行。
範例：
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();
}
React 伺服器元件 (RSC) 是 React 中的一項功能，允許在伺服器上渲染元件，而不需要在客戶端執行 JavaScript。這有助於減少發送到瀏覽器的 JavaScript 數量，提高效能並縮短頁面載入時間。
以上是Next.js 面試掌握：基本問題（第 2 部分）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
