頁面路由 (Pages Router): 佈局元件 (Layout Component)

首先，我們來建立一個將在所有頁面間共用的 佈局 (Layout) 元件。

建立一個名為 components 的頂層目錄。
在 components 目錄中，建立一個名為 layout.js 的檔案，內容如下：

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

接著，開啟 pages/posts/first-post.js，匯入 Layout 元件並將其設為最外層元件：

import Head from 'next/head';
import Link from 'next/link';
import Layout from '../../components/layout';
 
export default function FirstPost() {
  return (
    <Layout>
      <Head>
        <title>First Post</title>
      </Head>
      <h1>First Post</h1>
      <h2>
        <Link href="/">← Back to home</Link>
      </h2>
    </Layout>
  );
}

添加 CSS

現在，讓我們為 Layout 元件添加一些樣式。為此，我們將使用 CSS 模組 (CSS Modules)，這讓您可以在 React 元件中匯入 CSS 檔案。

建立一個名為 components/layout.module.css 的檔案，內容如下：

.container {
  max-width: 36rem;
  padding: 0 1rem;
  margin: 3rem auto 6rem;
}

重要提示： 若要使用 CSS 模組 (CSS Modules)，CSS 檔案名稱必須以 .module.css 結尾。

要在 components/layout.js 中使用這個 container 類別，您需要：

匯入 CSS 檔案並為其命名，例如 styles
使用 styles.container 作為 className

開啟 components/layout.js 並將其內容替換為以下程式碼：

import styles from './layout.module.css';
 
export default function Layout({ children }) {
  return <div className={styles.container}>{children}</div>;
}

如果您現在前往 http://localhost:3000/posts/first-post，應該會看到文字現在位於置中的容器內：

自動生成唯一類別名稱

現在，如果您在瀏覽器的開發者工具中查看 HTML，會注意到由 Layout 元件渲染的 div 有一個類似 layout_container__... 的類別名稱：

這就是 CSS 模組 (CSS Modules) 的功能：它會自動生成唯一的類別名稱。只要您使用 CSS 模組，就不必擔心類別名稱衝突的問題。

此外，Next.js 的程式碼分割功能也適用於 CSS 模組 (CSS Modules)。它能確保每個頁面只載入最少量的 CSS，從而減小打包檔案的大小。

CSS 模組 (CSS Modules) 會在構建時從 JavaScript 打包檔案中提取出來，並生成由 Next.js 自動載入的 .css 檔案。

佈局元件 (Layout Component)

添加 CSS

自動生成唯一類別名稱

On this page