页面路由 (Pages Router): 布局组件 (Layout Component)

首先，让我们创建一个将在所有页面间共享的 布局 (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 模块 (CSS Modules)，它允许你在 React 组件中导入 CSS 文件。

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

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

重要提示： 要使用 CSS 模块 (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>;
}

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

自动生成唯一类名

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

这就是 CSS 模块 (CSS Modules) 的功能：它会自动生成唯一的类名。只要使用 CSS 模块，你就不必担心类名冲突的问题。

此外，Next.js 的代码分割功能也适用于 CSS 模块 (CSS Modules)。它能确保为每个页面加载最少数量的 CSS，从而减小打包体积。

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

布局组件 (Layout Component)

添加 CSS

自动生成唯一类名

On this page