跳至主要内容

Day 03 - Layout 與 Template：構建可複用的 UI 架構

TL;DR​

Next.js App Router 的 Layout 適合放置需要跨頁保留的共用介面，例如導覽列、側邊欄與搜尋列；Template 則會在路由切換時重新建立，適合頁面轉場或需要重置狀態的情境。

Layout 和 Template 怎麼選？​

情境建議原因
導覽列、側邊欄、共用搜尋列Layout需要保留狀態與共用 UI
頁面切換動畫Template需要每次進入頁面時重新建立
表單重置Template不希望沿用上一頁的狀態

當我們開發一個網站時，導覽列 (Navbar) 和頁尾 (Footer) 通常是每個頁面都會出現的元素。

Next.js 透過 Layout 機制，讓我們能以層級化的方式管理共用介面。這不僅讓代碼更整潔，更重要的是它能「保留狀態」——當使用者在不同頁面間切換時，共用元件不會重新渲染。

💡 本文：佈局系統的核心觀念​

1. Root Layout (根佈局)​

在 src/app/layout.tsx 是整個應用程式的進入點。它是「必須」存在的，且必須包含 <html> 與 <body> 標籤。

  • 作用：定義全站通用的字體、SEO Meta 標籤、全域樣式。
  • 特性：它是最外層的包裝，影響範圍涵蓋所有頁面。
// src/app/layout.tsx
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="zh-TW">
      <body>
        <nav>這是全站導覽列</nav>
        {children} {/* 這裡會渲染各個頁面的內容 */}
      </body>
    </html>
  );
}
結構預覽

Layout 結構

2. Nesting Layouts (嵌套佈局)​

Layout 是可以層層堆疊的。如果您在某個子資料夾（如 /dashboard）建立一個 layout.tsx，它只會套用在該路徑下的頁面。

  • 案例：後台管理系統
    • Root Layout：負責全站導覽。
    • Dashboard Layout：負責側邊選單 (Sidebar)。
    • 最終層級：[Root Layout [Dashboard Layout [Page]]]

3. Layout vs Template：核心差異​

這是面試與開發中最常被問到的問題。兩者的行為完全不同：

特性Layout (常用)Template (特殊用途)
渲染行為路由切換時 不會 重新渲染路由切換時 會 重新建立實例
狀態保留保留輸入內容、捲軸位置不保留 狀態，每次重新初始化
適用場景導覽列、搜尋列、持久化 UI進入動畫 (CSS Transition)、表單重置
點擊展開：渲染差異圖解

Layout vs Template

4. 實戰建議：規劃儀表板架構​

假設我們正在開發一個電商後台，可以這樣組織：

  • src/app/layout.tsx (Root Layout)：全站 CSS 與全域導覽。
  • src/app/admin/layout.tsx (Admin Layout)：管理員專屬側邊欄。
  • src/app/admin/products/page.tsx (產品頁)。

當使用者在產品頁與訂單頁切換時，側邊欄完全不會跳動或重新加載，這種 「局部刷新」 是 Next.js 效能強大的秘密。

🏁 結論​

Layout 的設計反映了 Next.js 的美學：將「不變的」與「變動的」分離。

今日總結核心要點
今日進度學習 Root Layout 強制性、嵌套佈局與 Template 的差異。
專家筆記優先使用 Layout。只有在需要「頁面切換動畫」或「重置表單」時才使用 Template。

參考來源：

  1. Next.js - Pages and Layouts
  2. Next.js - Templates Guide

常見問題​

Layout 會在每次路由切換時重新渲染嗎？​

不一定。Layout 的設計目標是跨頁保留共用 UI 與狀態，但實際渲染仍取決於路由層級與資料變化；不要把它理解成完全不會重新執行的元件。

什麼時候應該使用 Template？​

當頁面需要在每次進入時重新初始化，例如頁面轉場、表單重置或不應保留的區域狀態，就可以考慮使用 Template。

這個系列的下一篇在哪裡？​

請回到 Next.js 學習筆記，從系列目錄選擇前後篇文章繼續閱讀。