App Router
Next.js 的 App Router 引入了一個新的應用程式建構模型,運用 React 的最新功能,如伺服器元件 (Server Components)、使用 Suspense 進行串流 (Streaming with Suspense) 和伺服器動作 (Server Actions)。
透過建立你的第一個頁面來開始使用 App Router。
常見問題
如何在版面配置中存取請求物件?
設計上你無法存取原始請求物件。不過,你可以透過僅限伺服器的函式存取 headers
和 cookies
。你也可以設定 cookies。
版面配置 (Layouts) 不會重新渲染。它們可以被快取並重複使用,以避免在頁面間導航時進行不必要的運算。透過限制版面配置存取原始請求,Next.js 可以防止在版面配置中執行可能緩慢或昂貴的使用者程式碼,這可能會對效能產生負面影響。
此設計還強制版面配置在不同頁面間具有一致且可預測的行為,從而簡化開發和除錯。
根據你正在建構的 UI 模式,平行路由 (Parallel Routes) 允許你在同一個版面配置中渲染多個頁面,且頁面可以存取路由區段以及 URL 搜尋參數。
如何在頁面上存取 URL?
預設情況下,頁面是伺服器元件 (Server Components)。你可以透過 params
屬性存取路由區段,並透過 searchParams
屬性存取 URL 搜尋參數。
如果你使用客戶端元件 (Client Components),則可以使用 usePathname
、useSelectedLayoutSegment
和 useSelectedLayoutSegments
來處理更複雜的路由。
此外,根據你正在建構的 UI 模式,平行路由 (Parallel Routes) 允許你在同一個版面配置中渲染多個頁面,且頁面可以存取路由區段以及 URL 搜尋參數。
如何從伺服器元件進行重新導向?
你可以使用 redirect
從頁面重新導向到相對或絕對 URL。redirect
是臨時 (307) 重新導向,而 permanentRedirect
是永久 (308) 重新導向。當這些函式在串流 UI 時使用,它們會插入一個 meta 標籤以在客戶端觸發重新導向。
如何使用 App Router 處理身份驗證?
以下是一些支援 App Router 的常見身份驗證解決方案:
如何設定 cookies?
你可以在伺服器動作 (Server Actions) 或路由處理器 (Route Handlers) 中使用 cookies
函式來設定 cookies。
由於 HTTP 不允許在串流開始後設定 cookies,因此你無法直接從頁面或版面配置設定 cookies。你也可以從中介軟體 (Middleware) 設定 cookies。
如何建構多租戶應用程式?
如果你想建構一個服務多個租戶的單一 Next.js 應用程式,我們已經建立了一個範例展示我們推薦的架構。
如何讓 App Router 的快取失效?
Next.js 中有多層快取,因此有多種方法可以讓快取的不同部分失效。進一步了解快取。
是否有基於 App Router 建構的全面開源應用程式?
有的。你可以查看 Next.js Commerce 或 Platforms Starter Kit,這是兩個使用 App Router 的較大開源範例。