章节9

布局组件

首先，让我们创建一个将在所有页面中共享的 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="/">← Back to home</Link>
      </h2>
    </Layout>
  );
}

添加 CSS

现在，让我们为 Layout 组件添加一些样式。为此，我们将使用 CSS Modules，它允许你在 React 组件中导入 CSS 文件。

创建一个名为 components/layout.module.css 的文件，其内容如下：

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

重要：要使用 CSS Modules，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>;
}

如果你现在访问 https://:3000/posts/first-post，你应该会看到文本现在位于一个居中容器中。

自动生成唯一的类名

现在，如果你在浏览器的开发者工具中查看 HTML，你会注意到由 Layout 组件渲染的 div 具有一个看起来像 layout_container__... 的类名。

这就是 CSS Modules 的作用：它会自动生成唯一的类名。只要你使用 CSS Modules，就无需担心类名冲突。

此外，Next.js 的代码分割功能也适用于 CSS Modules。它确保每个页面加载最少量的 CSS。这会带来更小的打包体积。

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

布局组件

添加 CSS

自动生成唯一的类名

您已完成本章9