佈局元件

基礎觀念

建立你的第一個應用程式

SEARCH ENGINE OPTIMIZATION

EXCEL

TypeScript

靜態資源、詮釋資料和 CSS

首先，我們要建立一個佈局元件，並且讓所有頁面都可以使用。

建立一個名為 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="/">
          <a>Back to home</a>
        </Link>
      </h2>
    </Layout>
  );
}

加入 CSS

現在，我們要在 Layout 元件加入一些樣式。為此，我們使用 CSS 模組，它可以讓你在 React 元件中匯入 CSS 檔案。

創建一個名為 components/layout.module.css 的檔案，並且加入以下內容：

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

重要： 要使用 CSS 模組，CSS 檔案名稱必須以 .module.css 結尾。

若要在 components/layout.js 內使用 container 這個 class，你需要：

匯入 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>;
}