章节9

布局组件

首先，让我们创建一个将在所有页面共享的布局组件。

创建一个名为 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 模块，它允许你在 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 类，你需要

导入 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 模块，你就不必担心类名冲突。

此外，Next.js 的代码分割功能也适用于 CSS 模块。它确保每个页面加载最少量的 CSS。这会减少捆绑包大小。

CSS 模块在构建时从 JavaScript 捆绑包中提取出来，并生成由 Next.js 自动加载的 .css 文件。

布局组件

添加 CSS

自动生成唯一的类名

您已完成章节9