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