使用 Next.js 创建全局布局和样式
2023年03月23日 - 约 526 字

创建全局布局

创建一个名为 components 的文件夹，在这个文件夹里创建一个 layout.js 文件，在里面写入下面的代码：

export default function Layout({ children }) {
    return <div>{children}</div>;
}

接下来，打开 pages/posts/first-post.js 文件，在顶部引入 Layout 组件 ../../components/layout ，并使其成为最外层组件：

import Head from 'next/head';
import Link from 'next/link';
import Layout from '../../components/layout';

export default function FirstPost() {
    return (
        <Layout>
            <Head>
                <title>FanMa's First Post</title>
            </Head>
            <h1>FanMa's First Post</h1>
            <h2>
                <Link href="/">Back to home</Link>
            </h2>
        </Layout>
    );
}

创建全局样式

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

创建一个名为 components/layout.module.css 的文件，并在文件时写入以下内容：

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

在要 components/layout.js 文件里使用 .container 这个类，你还需要完成下面这两步：

1、导入 CSS 文件并为其指定一个名称，例如 styles 。
2、用作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，您会注意到组件div呈现的Layout类名如下所示layout_container__...：

<div id="__next">
    <div class="layout_container__fbLkO">
        <h1>FanMa's First Post</h1>
        <h2><a href="/">Back to home</a></h2>
    </div>
</div>

这就是 CSS Modules 所做的：它自动生成唯一的类名。只要使用 CSS Modules ，就不必担心类名冲突。

此外，Next.js 的代码拆分功能也适用于CSS 模块。它确保为每个页面加载最少数量的 CSS。这导致更小的包大小。

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

使用 Next.js 创建全局布局和样式2023年03月23日 - 约 526 字

创建全局布局

创建全局样式

自动生成唯一的类名

使用 Next.js 创建全局布局和样式
2023年03月23日 - 约 526 字