前幾天很常提到的 layout 組件可以當成頁面的共享 UI，還有一個也跟 layout 組件非常類似的組件 -- template。

這兩個組件都可以用來渲染共享 UI。

唯一的不同是 layout 在路由切換時不會重新 render，而 template 在切換路由時都會重新 render 一次。

今天會先介紹 layout，明天會接著講 template。

大綱

• layout 介紹
• Root layout
• nested layout

layout 介紹

layout 組件用來建立共享 UI。同一個 folder 底下的 route 都會共享到這個 UI，而且換頁時不會重新 render，所以在 layout 組件中的 state 都可以保存下來。

建立 layout 需要在 folder 底下建立一個名稱為 layout 的組件，並且 export default 一個組件。

要在組件中使用 children 才能讓 page 組件顯示

export default function DashboardLayout({
  children, 
}: {
  children: React.ReactNode
}) {
  return (
    <section> 
      {children}
    </section>
  )
}

我先去烤肉

晚上回來補嘿，等我

參考資料

• Next - pages and latyouts