Next.js 独立开发教程（三）：CSS 样式的完整指南

在现代 Web 开发中，样式是一个至关重要的部分。一个优雅的 UI 能极大提升用户体验，而在使用 Next.js 开发应用时，其对 CSS 的强大支持为开发者提供了灵活性和高效性。从基础的 CSS 文件到模块化的 CSS，再到流行的 CSS-in-JS 和预处理器，Next.js 几乎涵盖了开发者可能用到的所有样式方案。

本篇教程以 Next.js 官方仪表盘应用开发教程的 "CSS 样式" 部分为基础，全面解析如何在 Next.js 中处理 CSS，并引导读者使用最佳实践完成一个样式优雅的仪表盘应用。

1. 样式在 Next.js 中的基本支持

Next.js 默认支持多种样式方案，无需额外配置即可开始使用。这些方案包括：

全局 CSS 文件：适用于需要全局共享的样式规则。
CSS 模块：用于组件级别的样式，具备模块化和自动作用域功能。
Sass/SCSS 支持：通过安装依赖支持更复杂的样式逻辑。
CSS-in-JS：如 `styled-jsx` 和第三方库（如 Emotion 和 Styled Components）。

接下来，我们将逐一介绍这些方案，并结合仪表盘应用进行具体实现。

2. 全局 CSS 文件

全局样式适用于跨页面共享的样式规则，比如字体定义、基础布局、以及通用的重置样式。在 Next.js 中，您可以通过在 `pages/_app.js` 中引入 CSS 文件来定义全局样式。

2.1 创建全局 CSS 文件

首先，在项目的 `styles` 目录下创建一个 `globals.css` 文件：

/* styles/globals.css */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f4f4f4;
}

h1 {
  color: #333;
}

a {
  text-decoration: none;
  color: #0070f3;
}

a:hover {
  text-decoration: underline;
}

2.2 在 `_app.js` 中引入全局样式

Next.js 的 `pages/_app.js` 文件用于控制全局布局和状态。在这里引入 `globals.css` 文件：

// pages/_app.js
import '../styles/globals.css';

export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

此时，`globals.css` 中的样式将自动应用到整个应用中，无需额外配置。

3. CSS 模块：组件级样式

CSS 模块是 Next.js 的强大功能之一，它允许我们为每个组件定义独立的样式，自动作用域到对应的组件，避免样式冲突。

3.1 创建一个样式模块文件

以创建一个按钮组件为例，在 `components` 目录中添加 `Button.js` 和 `Button.module.css` 文件：

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

export default function Button({ children }) {
  return <button className={styles.b