Next.js－出現在所有頁面的元件（Layout）

簡稱根元素

簡述

有些內容通常會出現在「每一個頁面」中，這時候要怎麼處理比較妥當？你第一個會想到的可能是寫成獨立的 Component。

But，另一個問題來了，假使有 100 個頁面都會用到的話，是不是就得在所有頁面都插入這個 Component，像這樣：

export default function About() {
  return (
    <div>
      {/* 插入寫好的 component */}
      <Navbar />
      <h1>about</h1>
      <p>
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Incidunt, ab culpa accusantium quo
        iure aperiam impedit ducimus eum sit earum illum, est fuga alias soluta suscipit tempore
        esse nulla dolorem!
      </p>
    </div>
  )
}

思考一下如果哪天我想把 <Navbar> 換位置？或者是又有新的 Component 要添加的話，我是不是就得一個一個去改或新增？雖然是可行，但是太麻煩了，所以其實有更好的作法。

首先注意到 pages/_app.js 這隻檔案：

import '../styles/globals.css'

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp

這支檔案的內容其實就是整個頁面的「結構」，換句話說放在這裡的東西都會被當作是頁面的一部分，比如說我加了一個「標題」：

import '../styles/globals.css'

function MyApp({ Component, pageProps }) {
  return (
    <div>
      <h1>Global Title</h1>
      <Component {...pageProps} />
    </div>
  )
}

export default MyApp

那現在不論是哪個頁面都會看到 Global Title 這段文字。

所以常見的 <Navbar> 或是 <Footer> 都可以放在這邊。不過比起直接放進去，更好的作法是抽成 Component 搭配 children 來使用，像這樣：

// components/Layout.js
import Navbar from './Navbar'

export default function Layout({ children }) {
  return (
    <div>
      <Navbar />
      {children}
    </div>
  )
}

// _app.js
import Layout from '../components/Layout'

function MyApp({ Component, pageProps }) {
  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  )
}

export default MyApp

把 children 寫成 props 的形式就可以讓 code 看起來更簡潔一些，也可以把邏輯封裝在元件自身上。