Next.js 支持哪些样式选项？

Question

Next.js 支持哪些样式选项？

Accepted Answer

Next.js 支持几乎所有 CSS 方法，并提供内置处理——您可以选择最适合项目的方案。 ## 全局 CSS ```tsx // app/layout.tsx — global styles imported once at the root import "./globals.css"; ``` ## CSS Modules（默认作用域限制） ```tsx // Button.module.css → class names are locally hashed (no collisions) import styles from "./Button.module.css"; export default () => ; // renders class like "Button_primary__a1b2" — scoped to this component ``` `.module.css` 约定会自动将类名限制在作用域内，因此一个文件中的 `.primary` 永远不会与另一个文件中的 `.primary` 冲突——无需运行时开销即可解决 CSS 的全局作用域问题。 ## Tailwind CSS（非常常用） ```tsx export default () => ; ``` 功能优先；Next.js 提供一流的设置支持。因其速度和一致性而受欢迎，并能自动清除未使用的样式。 ## CSS-in-JS ```tsx const Button = styled.button`background: blue;`; // styled-components, Emotion, etc. ``` 可行，但请注意：大多数 CSS-in-JS 库**仅为客户端组件**，需要额外配置才能支持服务器组件。较新的零运行时选项（vanilla-extract、Tailwind）更适合 App Router 的服务器优先模式。 ## Sass ```bash npm install sass # then import .scss files — built-in support, no config ``` ## 选择 ```text Tailwind → fast, consistent, server-friendly (popular default) CSS Modules → scoped, plain CSS, no runtime, great with Server Components CSS-in-JS → dynamic styles, but client-only + more setup in App Router Global CSS/Sass → resets, base styles, design tokens ``` ## 为什么这很重要 Next.js 不强制选择样式方案——它支持全局 CSS、作用域限制的 CSS Modules、Tailwind、Sass 和 CSS-in-JS，并提供内置工具支持。了解各方案的权衡（特别是在 App Router 中 CSS-in-JS 仅限客户端使用，而 Tailwind/CSS Modules 可与服务器组件良好配合）有助于您选择适合渲染模型的方案。