首先，让我们创建一个将在所有页面之间共享的 **布局** 组件。
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>
);
}
现在，让我们为 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 类，你需要
stylesstyles.container 作为 className打开 components/layout.js 并将其内容替换为以下内容
import styles from './layout.module.css';
export default function Layout({ children }) {
return <div className={styles.container}>{children}</div>;
}
如果你现在访问 https://127.0.0.1:3000/posts/first-post，你应该会看到文本现在位于居中的容器内
现在，如果你查看浏览器开发者工具中的 HTML，你会注意到由 Layout 组件渲染的 div 具有类似 layout_container__... 的类名。
这就是 CSS 模块 所做的：*它会自动生成唯一的类名*。只要你使用 CSS 模块，就不必担心类名冲突。
此外，Next.js 的代码分割功能也适用于 CSS 模块。它确保为每个页面加载最少的 CSS 量。这将导致更小的包大小。
CSS 模块 在构建时从 JavaScript 包中提取，并生成 .css 文件，这些文件由 Next.js 自动加载。
**快速回顾：** 使用 CSS 模块的一个好处是什么？