样式与静态资源

这一课你将能做到

1. 在 Next.js 中正确使用全局样式、CSS Modules、Tailwind CSS 三种方案
2. 用 next/font 加载 Google Fonts 和本地字体，避免布局偏移
3. 用 next/image 实现图片的自动优化、懒加载、占位符
4. 用 public/ 目录管理静态资源，并理解其缓存行为
5. 处理 SVG、视频、PDF 等非图片静态资源

为什么要学

样式和资源处理是前端性能的隐形杀手。一张未压缩的 5MB PNG、一个阻塞渲染的 Google Fonts 链接、一次意外的布局偏移（CLS），都能让 Lighthouse 分数掉 20 分。Next.js 把这些优化做成了「默认就该用」的内置组件：<Image> 自动压缩裁剪转 WebP，next/font 自动下载字体文件并内联关键 CSS，CSS Modules 自动解决类名冲突。

人话：你自己手动优化图片字体，就像自己手磨咖啡——能喝但费事。Next.js 的内置优化是全自动咖啡机，按一下按钮，压缩、格式转换、缓存策略全给你配好。

先建立图像

样式方案选择:
├── 全局样式（globals.css）     ←  reset、变量、第三方库样式
├── CSS Modules（*.module.css） ← 组件级样式，类名自动哈希
├── Tailwind CSS                ← 原子化 CSS，utility-first
└── 内联样式（style={{}}）       ← 动态值、简单覆盖

静态资源路径:
public/images/logo.png → 访问 /images/logo.png
app/icon.png           → 访问 /icon（favicon）
app/opengraph-image.png → 社交分享卡片图

跟着做

步骤 1：全局样式

app/globals.css：

:root {
  --primary: #0070f3;
  --background: #ffffff;
  --foreground: #171717;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }
}

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
}

在 app/layout.tsx 中导入：

import './globals.css';

全局样式只能在这里导入一次，不能在组件里重复导入。

步骤 2：CSS Modules

app/components/Button.module.css：

.button {
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  background: var(--primary);
  color: white;
  cursor: pointer;
}

.button:hover {
  opacity: 0.9;
}

.danger {
  background: #e00;
}

app/components/Button.tsx：

import styles from './Button.module.css';

interface Props {
  children: React.ReactNode;
  danger?: boolean;
}

export default function Button({ children, danger }: Props) {
  const className = danger ? `${styles.button} ${styles.danger}` : styles.button;
  return <button className={className}>{children}</button>;
}