Next.js面試題：API深度解析

Next.js 通過 App Router 的引入徹底改變了 Web 開發范式。在這個新時代，深入理解 Next.js 的 API 函數不再只是錦上添花，而是技術面試中的關鍵區分點。這些函數構成了構建高性能、可擴展、現代化 Web 應用的基石。

本文將系統地解析 Next.js 的各類函數，不僅闡述它們的基本功能，更深入探討實際應用場景、細微差別以及面試中可能出現的問題。我們將著重于理解每個函數背后的實現原理與設計思路。

Next.js 緩存函數與應用性能優化

緩存是 Next.js 性能策略的核心。面試中，候選人需要清晰闡述不同緩存層級和控制機制。

擴展的 fetch API

Next.js 對原生 fetch API 進行了擴展，為數據獲取提供了精細的服務器端緩存控制。

在實際開發中，我們可以通過幾個關鍵配置選項來控制緩存行為：

JavaScript

// 默認行為，開發環境每次請求獲取，生產環境靜態路由只獲取一次const data = await fetch('https://api.example.com/data');// 始終從服務器獲取最新數據，不使用緩存const freshData = await fetch('https://api.example.com/data', { cache: 'no-store' });// 優先使用緩存，設置60秒的重新驗證時間const cachedData = await fetch('https://api.example.com/data', {next: { revalidate: 60 }
});// 使用緩存標簽，便于精確失效const taggedData = await fetch('https://api.example.com/products', {next: { tags: ['products'] }
});

這些緩存控制選項讓開發者能夠根據數據的性質和更新頻率來優化應用性能。

緩存失效機制

Next.js 提供了兩種主要的緩存失效方法：

按路徑失效：revalidatePath 允許我們清除特定路徑的緩存數據。
JavaScript

// 在Server Action中使用async function updateProduct(formData) {await saveProduct(formData);// 失效產品列表頁面的緩存revalidatePath('/products');// 注意：目前在Server Action中使用會使客戶端路由緩存中的所有路由失效
}

按標簽失效：revalidateTag 讓我們能夠更精確地失效與特定標簽關聯的緩存數據。
JavaScript

// 在Server Action中使用async function updateProduct(formData) {await saveProduct(formData);// 只失效帶有'products'標簽的緩存數據revalidateTag('products');
}

面試中，理解這些緩存機制的工作原理以及何時使用哪種方法是展示你對 Next.js 深入理解的好機會。

Next.js 中的 HTTP 請求處理

Next.js 在標準 Web API 之上提供了強大的抽象，用于處理 cookies、headers 和構建響應。

cookies 函數

cookies() 函數是一個異步函數，用于在 Server Components 中讀取請求 cookies，以及在 Server Actions 或 Route Handlers 中讀取/寫入 cookies。

JavaScript

// 在Server Component中讀取cookieimport { cookies } from 'next/headers';async function UserProfile() {const cookieStore = cookies();const theme = cookieStore.get('theme');return <div>Current theme: {theme?.value || 'default'}</div>;
}// 在Server Action中設置cookieasync function setTheme(theme) {'use server';cookies().set('theme', theme, {httpOnly: true,secure: process.env.NODE_ENV === 'production',maxAge: 60 * 60 * 24 * 7, // 一周path: '/'});// 重定向或返回數據
}

值得注意的是，從 Next.js 15 開始，cookies() 函數變為異步，這是一個重要變化。使用此函數會使路由動態渲染，因為它依賴于運行時請求信息。

headers 與請求處理

headers() 函數讓我們能夠在 Server Component 中訪問傳入請求的頭部信息：

JavaScript

import { headers } from 'next/headers';async function UserAgentComponent() {const headersList = headers();const userAgent = headersList.get('user-agent');return <div>Your browser: {userAgent}</div>;
}

在 Middleware 和 Route Handlers 中，Next.js 提供了增強的 NextRequest 和 NextResponse 對象，它們擴展了標準 Web API：

JavaScript

// 在Middleware中使用import { NextRequest, NextResponse } from 'next/server';export function middleware(request: NextRequest) {// 檢查用戶代理const userAgent = request.headers.get('user-agent');// 基于移動設備重定向if (userAgent && userAgent.includes('Mobile')) {return NextResponse.redirect(new URL('/mobile', request.url));}// 添加自定義頭部并繼續const response = NextResponse.next();response.headers.set('x-custom-header', 'my-value');return response;
}

面試中，理解這些 API 的異步特性以及它們如何影響渲染策略是關鍵點。例如，你可以解釋如何在需要保持頁面大部分靜態的同時訪問 cookies 或 headers 信息。

Next.js 路由導航與控制

Next.js 提供了一套完整的路由系統，相關鉤子和函數讓開發者能夠精確控制導航和訪問路由信息。

客戶端導航鉤子

useRouter 是最常用的客戶端導航鉤子，提供了編程式路由控制：

JavaScript

'use client'import { useRouter } from 'next/navigation'export default function NavigationButtons() {const router = useRouter()return (<div><button onClick={() => router.push('/dashboard')}>Go to Dashboard</button><button onClick={() => router.back()}>Go Back</button><button onClick={() => router.refresh()}>Refresh Current Page</button></div>)
}

useRouter.refresh() 特別值得注意，它會重新獲取數據并重新渲染 Server Components，但保留客戶端狀態，這與完整頁面刷新有很大不同。

其他有用的導航鉤子包括：

usePathname(): 獲取當前URL路徑
useParams(): 訪問動態路由參數
useSearchParams(): 讀取URL查詢字符串
useSelectedLayoutSegment(s): 了解活動路由段

JavaScript

'use client'import { usePathname, useParams, useSearchParams } from 'next/navigation'export function RouteInfo() {const pathname = usePathname();const params = useParams();const searchParams = useSearchParams();return (<div><p>Current path: {pathname}</p><p>Route params: {JSON.stringify(params)}</p><p>Search query: {searchParams.get('q')}</p></div>);
}

重定向與錯誤處理

Next.js 提供了幾個用于控制導航流程的函數：

JavaScript

import { redirect, permanentRedirect, notFound } from 'next/navigation';// 臨時重定向
redirect('/login');// 永久重定向（對SEO更友好）
permanentRedirect('/new-page');// 顯示404頁面
notFound();

這些函數在不同上下文中的行為略有不同。例如，redirect 在 Server Actions 中使用 303 狀態碼，而在其他情況下使用 307 狀態碼。了解這些細微差別對于處理表單提交和保留請求方法非常重要。

元數據優化與SEO

Next.js 提供了強大的工具來管理元數據，這對SEO和社交媒體分享至關重要。

動態元數據生成

generateMetadata 函數允許我們基于路由參數或外部數據動態生成頁面元數據：

TypeScript

// app/products/[id]/page.tsxexport async function generateMetadata({ params }) {const product = await getProduct(params.id);return {title: product.name,description: product.description,openGraph: {images: [{ url: product.imageUrl }]}};
}export default function ProductPage({ params }) {// 頁面組件
}

Next.js 會自動記憶化 generateMetadata 中的數據獲取，并在構建時（對靜態路由）或請求時（對動態路由）生成元數據。

動態圖像生成

對于社交媒體分享圖像，ImageResponse 提供了使用JSX和CSS動態生成圖像的能力：

TypeScript

// app/products/[id]/opengraph-image.tsximport { ImageResponse } from 'next/og';export const runtime = 'edge';export async function GET(request, { params }) {const product = await getProduct(params.id);return new ImageResponse((<divstyle={{display: 'flex',fontSize: 48,background: 'white',width: '100%',height: '100%',padding: 32,alignItems: 'center',justifyContent: 'center'}}><img src={product.imageUrl} width="200" height="200" /><h1>{product.name}</h1></div>),{width: 1200,height: 630});
}

這種方法比靜態圖像更靈活，可以為每個產品或文章生成獨特的社交媒體預覽圖像。

服務器端邏輯與構建優化

Next.js 使用特定函數來指導其構建過程，特別是在靜態生成和處理服務器端任務方面。

靜態路由生成

generateStaticParams 函數是靜態站點生成的核心，它允許我們在構建時預渲染動態路由：

TypeScript

// app/blog/[slug]/page.tsxexport async function generateStaticParams() {const posts = await getPosts();return posts.map((post) => ({slug: post.slug}));
}export default function BlogPost({ params }) {// 頁面組件
}

這個函數在構建時運行，為每個返回的參數集生成一個靜態路由。它可以與 dynamicParams 配置結合使用，控制未預生成路徑的處理方式：

JavaScript

// 允許按需生成未預渲染的路徑（默認行為）
export const dynamicParams = true;// 僅允許訪問預生成的路徑，其他返回
404export const dynamicParams = false;

響應后任務

after 函數允許我們調度在響應完成后執行的任務，這對于不應阻塞初始響應的操作（如日志記錄、分析）非常有用：

JavaScript

import { after } from 'next/server';export async function GET() {// 主要響應邏輯const data = await fetchData();// 調度響應后任務after(() => {// 這不會阻塞響應logAccess();updateAnalytics();});return Response.json(data);
}

after 不會使路由動態化，即使對于靜態頁面，回調也會在構建時或重新驗證時執行。這使得它成為處理副作用的理想選擇，同時保持性能優勢。

內容預覽模式

draftMode 函數為內容創建者提供了查看未發布內容的能力，這對于與無頭CMS集成特別有用：

TypeScript

// app/api/enable-draft/route.tsimport { draftMode } from 'next/headers';export async function GET(request) {const { searchParams } = new URL(request.url);const secret = searchParams.get('secret');// 驗證預覽請求if (secret !== process.env.PREVIEW_SECRET) {return new Response('Invalid token', { status: 401 });}// 啟用草稿模式draftMode().enable();return new Response('Draft mode enabled');
}

在頁面組件中，我們可以檢查草稿模式狀態并相應地獲取內容：

TypeScript

// app/page.tsximport { draftMode } from 'next/headers';export default async function Page() {const { isEnabled } = await draftMode();// 根據草稿模式狀態獲取內容const content = await getContent({ draft: isEnabled });return (<div>{isEnabled && <div className="draft-banner">Draft Mode</div>}<h1>{content.title}</h1><div>{content.body}</div></div>);
}

授權與錯誤狀態管理

Next.js 提供了幾個實驗性函數來處理常見的授權和錯誤狀態，使開發者能夠創建一致的用戶體驗。

授權狀態處理

forbidden 和 unauthorized 函數（實驗性）提供了一種聲明式方法來處理授權失敗：

TypeScript

// app/admin/page.tsximport { forbidden, unauthorized } from 'next/server';
import { getCurrentUser } from '@/lib/auth';export default async function AdminPage() {const user = await getCurrentUser();if (!user) {// 用戶未登錄，顯示401頁面unauthorized();}if (!user.isAdmin) {// 用戶無權訪問，顯示403頁面forbidden();}return <AdminDashboard user={user} />;
}

這些函數會拋出錯誤，觸發渲染相應的錯誤頁面（unauthorized.js 或 forbidden.js），可以在這些頁面中提供自定義UI，如登錄表單。

錯誤傳播控制

unstable_rethrow 函數解決了一個微妙但重要的問題：確保 Next.js 內部錯誤（如從 notFound() 或 redirect() 拋出的錯誤）不會被用戶的 try/catch 塊意外捕獲：

JavaScript

import { unstable_rethrow } from 'next/dist/client/components/error-boundary';async function fetchAndDisplayProduct(id) {try {const product = await fetchProduct(id);if (!product) {notFound();}return <ProductDetails product={product} />;} catch (error) {// 清理資源closeConnections();// 確保 Next.js 錯誤繼續傳播unstable_rethrow(error);// 這里的代碼永遠不會執行}
}

這確保了 Next.js 的控制流機制能夠正常工作，同時仍然允許開發者在錯誤處理中執行必要的清理。

性能監控與Web Vitals

監控核心 Web 指標對于了解真實用戶體驗和識別性能問題至關重要。

Web Vitals 報告

useReportWebVitals 鉤子使我們能夠收集和報告關鍵性能指標：

JavaScript

'use client'import { useReportWebVitals } from 'next/web-vitals';export function WebVitalsReporter() {useReportWebVitals((metric) => {// 根據指標類型進行處理switch (metric.name) {case 'FCP':// 首次內容繪制console.log('FCP:', metric.value);break;case 'LCP':// 最大內容繪制console.log('LCP:', metric.value);break;case 'CLS':// 累積布局偏移console.log('CLS:', metric.value);break;case 'FID':// 首次輸入延遲console.log('FID:', metric.value);break;case 'TTFB':// 首字節時間console.log('TTFB:', metric.value);break;case 'INP':// 交互到下一次繪制console.log('INP:', metric.value);break;}// 發送到分析服務sendToAnalytics({id: metric.id,name: metric.name,value: metric.value,rating: metric.rating // 'good', 'needs-improvement', 'poor'});});return null; // 這個組件不渲染任何UI
}

通常，我們會在根布局中包含這個組件，以跟蹤整個應用程序的性能：

TypeScript

// app/layout.tsximport { WebVitalsReporter } from '@/components/web-vitals';export default function RootLayout({ children }) {return (<html lang="en"><body><WebVitalsReporter />{children}</body></html>);
}

通過收集這些指標，我們可以識別性能瓶頸，衡量優化的影響，并確保為用戶提供流暢的體驗。