完善布局
目前我们仅添加了最基础的 React 和 CSS 代码来演示概念，例如 CSS 模块 (CSS Modules)。在进入下一节关于数据获取 (Data Fetching) 的课程前，让我们先优化页面样式和代码。
更新 components/layout.module.css
首先打开 components/layout.module.css 文件，用以下更完善的布局和个人资料图片样式替换原有内容：
.container {
max-width: 36rem;
padding: 0 1rem;
margin: 3rem auto 6rem;
}
.header {
display: flex;
flex-direction: column;
align-items: center;
}
.backToHome {
margin: 3rem 0 0;
}创建 styles/utils.module.css
其次，我们创建一组可复用的 CSS 工具类（用于文本样式）。
新建名为 styles/utils.module.css 的 CSS 文件，内容如下：
.heading2Xl {
font-size: 2.5rem;
line-height: 1.2;
font-weight: 800;
letter-spacing: -0.05rem;
margin: 1rem 0;
}
.headingXl {
font-size: 2rem;
line-height: 1.3;
font-weight: 800;
letter-spacing: -0.05rem;
margin: 1rem 0;
}
.headingLg {
font-size: 1.5rem;
line-height: 1.4;
margin: 1rem 0;
}
.headingMd {
font-size: 1.2rem;
line-height: 1.5;
}
.borderCircle {
border-radius: 9999px;
}
.colorInherit {
color: inherit;
}
.padding1px {
padding-top: 1px;
}
.list {
list-style: none;
padding: 0;
margin: 0;
}
.listItem {
margin: 0 0 1.25rem;
}
.lightText {
color: #666;
}你可以在整个应用中复用这些工具类，甚至可以在
global.css文件中使用。工具类指的是编写 CSS 选择器的一种方式，而非具体方法（如全局样式、CSS 模块、Sass 等）。了解更多关于 工具优先 CSS (Utility-first CSS)。
更新 components/layout.js
第三步，打开 components/layout.js 并用以下代码替换原有内容，将 Your Name 改为实际姓名：
import Head from 'next/head';
import Image from 'next/image';
import styles from './layout.module.css';
import utilStyles from '../styles/utils.module.css';
import Link from 'next/link';
const name = 'Your Name';
export const siteTitle = 'Next.js Sample Website';
export default function Layout({ children, home }) {
return (
<div className={styles.container}>
<Head>
<link rel="icon" href="/favicon.ico" />
<meta
name="description"
content="Learn how to build a personal website using Next.js"
/>
<meta
property="og:image"
content={`https://og-image.vercel.app/${encodeURI(
siteTitle,
)}.png?theme=light&md=0&fontSize=75px&images=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fnextjs-black-logo.svg`}
/>
<meta name="og:title" content={siteTitle} />
<meta name="twitter:card" content="summary_large_image" />
</Head>
<header className={styles.header}>
{home ? (
<>
<Image
priority
src="/images/profile.jpg"
className={utilStyles.borderCircle}
height={144}
width={144}
alt=""
/>
<h1 className={utilStyles.heading2Xl}>{name}</h1>
</>
) : (
<>
<Link href="/">
<Image
priority
src="/images/profile.jpg"
className={utilStyles.borderCircle}
height={108}
width={108}
alt=""
/>
</Link>
<h2 className={utilStyles.headingLg}>
<Link href="/" className={utilStyles.colorInherit}>
{name}
</Link>
</h2>
</>
)}
</header>
<main>{children}</main>
{!home && (
<div className={styles.backToHome}>
<Link href="/">← Back to home</Link>
</div>
)}
</div>
);
}主要变更包括：
- 新增用于描述页面内容的
meta标签（如og:image） - 布尔型
home属性，用于调整标题和图片尺寸 - 当
home为false时在底部显示 "返回首页" 链接 - 使用
next/image添加图片，并通过 priority 属性实现预加载
更新 pages/index.js
最后更新首页内容。
打开 pages/index.js 并替换为以下代码：
import Head from 'next/head';
import Layout, { siteTitle } from '../components/layout';
import utilStyles from '../styles/utils.module.css';
export default function Home() {
return (
<Layout home>
<Head>
<title>{siteTitle}</title>
</Head>
<section className={utilStyles.headingMd}>
<p>[你的自我介绍]</p>
<p>
(这是示例网站 - 你可以通过{' '}
<a href="https://nextjs.org/learn">我们的 Next.js 教程</a>构建类似站点。)
</p>
</section>
</Layout>
);
}然后将 [你的自我介绍] 替换为你的个人介绍。以下是作者的示例：
完成！现在我们已经完善了布局代码，可以继续学习数据获取相关课程了。
在结束本节课程前，我们将在下一页讨论一些与 Next.js CSS 支持相关的实用技巧。