播面

Next.js 对 CSS 的支持非常全面且开箱即用。它不需要复杂的 Webpack 配置即可支持多种主流的 CSS 开发模式。

以下是 Next.js 内置支持的主要 CSS 方案：

1. CSS Modules (推荐用于传统 CSS 写法)

这是 Next.js 最核心的内置功能之一。

• 文件命名：以 .module.css 结尾的文件（例如 styles.module.css）。
• 特点：
  • 局部作用域：Next.js 会自动为类名生成唯一的哈希值，从而避免类名冲突。
  • 零配置：直接导入即可使用。
• 用法示例：
  jsx

  import styles from './styles.module.css'
  
  export default function Dashboard() {
    return <div className={styles.dashboard}>Dashboard</div>
  }

2. Global CSS (全局样式)

Next.js 允许你导入标准的 .css 文件。

• 用法：
  • App Router: 可以在任何组件、布局 (layout.js) 或页面中导入全局 CSS。
  • Pages Router: 传统上只能在 _app.js 文件中导入全局 CSS（为了避免样式冲突）。
• 场景：通常用于重置样式（Reset CSS）、引入第三方库的样式（如 Bootstrap）或定义全局变量。

3. Tailwind CSS (官方强力推荐)

虽然 Tailwind 是一个外部库，但 Next.js 对其集成的支持是“一等公民”级别的。

• 集成：在使用 create-next-app 创建项目时，CLI 会直接询问是否预装 Tailwind CSS。
• 原理：Next.js 内置了 PostCSS 支持，能够无缝编译 Tailwind。
• 优势：配合 Next.js 的 App Router 和 Server Components 使用时性能极佳，因为它是静态提取的，不会增加运行时的 JS 体积。

4. Sass / SCSS

Next.js 内置了对 Sass 的配置支持。

• 依赖：虽然配置是内置的，但你需要手动安装 Sass 编译器：
  bash

  npm install sass

• 用法：安装后，你可以直接使用 .scss 或 .sass 扩展名。它同样支持 CSS Modules（即 .module.scss）。

5. CSS-in-JS (Styled-JSX)

• Styled-JSX：这是 Next.js 团队开发的一个库，默认预装在 Next.js 中。它允许你在组件内部直接写 CSS，并且样式是隔离的。
  jsx

  <style jsx>{`
    .container {
      margin: 20px;
    }
  `}</style>

6. 其他 CSS-in-JS 库 (Styled-components, Emotion 等)

虽然这些不是“内置”的（需要安装第三方包），但 Next.js 提供了官方的 API (useServerInsertedHTML) 来支持这些库在 服务端渲染 (SSR) 中的样式注入。

• 注意：在 App Router (Server Components) 架构下，传统的运行时 CSS-in-JS 库（如 Styled-components）需要特定的配置（Registry）才能正常工作，且通常只能在 Client Components 中运行。因此，Next.js 官方目前更倾向于推荐 Tailwind CSS 或 CSS Modules。

总结与建议

如果你现在开始一个新项目，Tailwind CSS 通常是 Next.js 生态中最主流的选择。