靜態資源、詮釋資料 和 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>; }

如果你現在前往 http://localhost:3000/posts/first-post ,你應該會看到文字已經顯示於一個置中的容器內了。

自動產生唯一的 Class 名稱

現在,如果你在瀏覽器的開發者工具中觀察 HTML,你會發現 Layout 元件所渲染的 div 標籤裡有個 layout_container__... 的 class 名稱:

這就是 CSS 模組的功能:它會自動產生唯一的 class 名稱。 只要你使用 CSS 模組,你就不必擔心 class 名稱衝突的問題。

另外,Next.js 的程式碼分割功能也適用於 CSS 模組,可確保每個頁面載入最少量的 CSS 及產生較小的打包檔案。

CSS Modules 會在建置時從 JavaScript 打包檔案中被提取出來,並且產生 .css 檔案,這些檔案會被 Next.js 自動載入。

小試身手

下列哪一種樣式方法 Next.js 不支援?

返回上一頁 ← 前往下一頁 →
本篇文章由lucy70381

lucy70381

貢獻翻譯。瞭解如何參與貢獻