Next.js 入门到进阶：(四) 样式与静态资源

在 Next.js 中，有多种方式可以为你的应用添加样式，每种方式都有其适用的场景。

1. 全局样式 (Global Styles)

全局样式会影响应用中的所有组件和页面。它适合用来定义一些基础样式，比如 body 标签的背景色、全局字体、链接颜色等。

在我们的项目结构中，src/app/globals.css 就是全局样式文件。这个文件会在根布局 src/app/layout.tsx 中被导入，从而应用到整个应用。

// src/app/layout.tsx
import './globals.css'; // 导入全局样式

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

你可以打开 globals.css 文件，尝试修改 body 的背景色，保存后会立即在浏览器中看到效果。

注意：请谨慎使用全局样式，过多的全局规则容易导致样式冲突和难以维护。

2. Tailwind CSS

当你在创建项目时选择了 Yes，create-next-app 就已经为我们完美集成了 Tailwind CSS。

Tailwind 是一个“功能优先 (Utility-First)”的 CSS 框架，它提供了一系列原子化的 CSS 类 (Utility Classes)，让你直接在 HTML (或 JSX) 中快速构建界面，而无需编写单独的 CSS 文件。

例如，在之前的教程中，我们已经不自觉地在使用它了：

// <h1 className="text-3xl font-bold">关于我们</h1>
// <p className="mt-4">这是一个段落。</p>
// <Link href="/about" className="text-blue-500 hover:underline">跳转</Link>

text-3xl: 设置字体大小。
font-bold: 设置字体粗细为粗体。
mt-4: 设置上外边距 (margin-top)。
text-blue-500: 设置文字颜色为蓝色。
hover:underline: 当鼠标悬停时，添加下划线。

使用 Tailwind 可以极大地提高开发效率，并且由于样式和组件结构紧密耦合，维护起来也更加直观。我们整个系列教程都将优先使用 Tailwind 来编写样式。

3. CSS Modules

如果你还是想编写传统的 CSS，但又担心类名冲突，那么 CSS Modules 是一个绝佳的选择。

CSS Modules 会在构建时自动为你的 CSS 类名生成一个唯一的哈希值，从而保证了样式的组件级作用域。这意味着你可以在不同的组件中使用相同的类名，而它们之间不会相互影响。

使用 CSS Modules

创建一个以 .module.css 结尾的文件，例如 src/app/about/About.module.css。
在该文件中编写你的 CSS：

/* src/app/about/About.module.css */
.highlight {
  color: purple;
  font-weight: bold;
  padding: 2px 4px;
  background-color: #f0e6f7;
  border-radius: 4px;
}

在你的组件中导入并使用它：

// src/app/about/page.tsx
import styles from './About.module.css'; // 导入 CSS Module

export default function AboutPage() {
  return (
    <main className="p-8">
      <h1 className="text-3xl font-bold">关于我们</h1>
      <p className="mt-4">
        这是一个使用 <span className={styles.highlight}>CSS Modules</span> 创建的页面。
      </p>
    </main>
  );
}

在浏览器中检查元素，你会发现 <span> 的 class 并不是 highlight，而是一个类似 About_highlight__xYz12 的唯一字符串。

4. 静态资源管理 (Static Assets)

图片、字体、图标等静态文件应该放在 public 目录下。

public 目录下的文件可以被你的代码以根路径 / 开头直接引用。

添加图片

将一张图片（例如 my-logo.png）放入 public 目录。
在你的组件中使用它：

import Image from 'next/image'; // 推荐使用 Next.js 的 Image 组件

function Header() {
  return (
    <header>
      {/* 
        Image 组件会自动优化图片。
        src 路径从 public 目录的根开始算。
      */}
      <Image src="/my-logo.png" alt="My Company Logo" width={100} height={50} />
    </header>
  );
}

为什么使用 <Image> 组件而不是 <img> 标签？

Next.js 的 <Image> 组件提供了自动的图片优化，包括：

防止布局偏移: 在图片加载时自动占位，避免页面抖动。
懒加载: 图片进入视口时才加载。
自动缩放和格式转换: 根据设备提供最优尺寸和格式 (如 WebP) 的图片。

这些优化对于提升网站性能和用户体验至关重要。

总结

在这一章，我们学习了 Next.js 中主要的样式和静态资源管理方法：

使用 globals.css 添加全局样式。
通过 Tailwind CSS 的功能类快速构建 UI。
利用 CSS Modules 实现组件级别的样式隔离。
将图片等静态资源放在 public 目录，并使用 <Image> 组件进行优化。

现在你的应用不仅有了结构，还能变得好看起来了！下一篇，我们将进入一个更核心的话题：数据获取。