首先，讓我們建立一個 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="/">
<a>Back to home</a>
</Link>
</h2>
</Layout>
);
}現在，讓我們為 Layout 元件添加一些樣式。 為此，我們將使用 CSS Modules，它允許您在 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，你需要：
stylesstyles.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__... 的 class name：
這就是 CSS 模組所做的：它會自動生成唯一的 class name。 只要你使用 CSS Modules，你就不必擔心 class name 衝突。
此外，Next.js 的程式碼拆分功能也適用於 CSS 模組。 它確保為每個頁面加載最少量的 CSS。 這導致更小的綑綁包大小。
CSS 模組在建構時從 JavaScript 綑綁包中提取，並生成由 Next.js 自動加載的 .css 文件。
下一節我們來聊聊全域樣式 global css。
© Copyrights 從想像到創造. All Rights Reserved.
