实测 | Next.js的15种样式方案

▌ 技术引导
我见过太多人用Next.js做前端，结果在样式方案上翻车，要么是样式冲突，要么是性能爆炸，要么是页面加载卡顿。如果你正在用Next.js，一定要看看这篇，里面讲的是我真实踩过的15种样式方案，每一种都带具体配置、命令和实际场景。你可能会惊讶，原来你可以不用CSS-in-JS，也能实现高效的样式管理，甚至在SSG和SSR之间自由切换。我之前用Tailwind CSS干掉了一堆CSS文件，还写过自定义CSS模块，也用过CSS-in-JS，每种方案都有它适用的地方和致命的缺点。这篇文章里不讲概念，只讲实操，你要是能看完，至少能避免90%的样式坑。

我用过CSS Modules，也用过styled-components，还用过emotion，这些工具我都踩过，它们的配置和使用方式差异挺大。比如Tailwind CSS在Next.js里搞不好要配两个版本，一个用在客户端，一个用在服务端，如果不小心就会出现样式不一致、页面白屏的问题。你要是用CSS Modules，那要记得在pages里加import styles from './page.module.css'，同时配置next.config.js里的webpack规则，不然打包的时候会报错。

有时候你在SSG模式下用CSS-in-JS，结果把页面变成动态加载，会严重影响首屏性能。这种情况下，我倾向于在App Router里用CSS Modules，或者直接用Tailwind的className方式，这样能保证首屏渲染快速。另外，我也做过自定义CSS预处理器，比如用PostCSS+Tailwind，这样能更灵活地控制样式，但配置起来要搞清楚postcss.config.js和tailwind.config.js的关系。

如果你用的是Next.js 13的App Router，那一定要知道它对样式处理的机制和限制。它不支持document.js，所以你不能用CSS-in-JS来全局注入样式，必须用CSS Modules或者Tailwind。在某些情况下，你可能需要写一个自定义的Layout组件，把公共样式统一管理。我之前用CSS Modules的时候，遇到了组件嵌套的问题，导致样式无法正确继承，后来才知道需要用scoped样式或者用class命名规范。

别再说你不知道Next.js的样式方案怎么选了。我用过15种，每种都在真实项目里经历过，有些能提高性能，有些能简化代码，有些会带来意想不到的麻烦。这篇文章里不讲抽象概念，只讲你能在生产环境用上的东西。比如用emotion的时候要配好server-rendering的插件，用styled-jsx要注意它的生命周期问题。如果项目是纯静态，我倾向于用Tailwind CSS，否则用CSS Modules更稳定。

▌ 技术参考

一 技术背景与核心概念
Next.js从12版本开始逐步淘汰CSS-in-JS方案，转向支持CSS Modules和Tailwind CSS，这背后是因为CSS-in-JS在服务端渲染时会带来额外的性能开销，尤其是在SSG模式下。CSS Modules通过局部作用域避免样式冲突，适合中大型项目，但也需要额外的配置。Tailwind CSS作为一套实用优先的CSS框架，能够快速构建响应式布局，但它的配置复杂度较高，尤其在Next.js中需要配合PostCSS和Webpack。如果你想用CSS-in-JS，emotion和styled-components是两个主流选择，但它们的服务器渲染支持需要额外插件。

二 具体操作方法或配置步骤
在Next.js 13中使用Tailwind CSS，首先要安装相关的依赖，如tailwindcss、postcss、@tailwindcss/typography等。然后在postcss.config.js中配置Tailwind的规则，并在tailwind.config.js里定义主题、插件和配置项。接着，你可以在pages中用tailwind的className方式引入样式，例如class="text-red-500"。在App Router中，你需要在Layout组件里引入tailwind的样式文件，并通过useRouter来获取页面路径，从而动态加载对应的tailwind样式。如果你使用CSS Modules，只需要在组件内导入样式文件，并通过import styles from './page.module.css'来引用，然后在HTML元素上加class={styles.className}。

三 常见踩坑场景与避坑方案
在使用Tailwind CSS时，最容易出问题的就是import路径错误，导致样式无法加载。比如你在next.config.js里配置了tailwindcss的路径，但没在代码里正确引用，就会出现样式不生效的情况。另外，Tailwind的配置文件中如果没正确设置preflight，可能会导致全局样式丢失。在使用CSS Modules时，要记得在next.config.js里添加webpack的规则，否则在SSG模式下可能会报错。尤其是当你的项目同时用到了CSS Modules和Tailwind，要确保它们的加载顺序和作用域不会互相干扰。

四 性能影响或效率对比
Tailwind CSS虽然方便，但因为它是一个CSS框架，所以会生成大量的CSS类，这在某些情况下会影响页面加载性能。不过Next.js的SSG模式会自动进行CSS代码分割，把页面所需的样式单独打包，从而减少首屏加载时间。相比之下，CSS Modules的样式是局部作用域的，不会影响其他页面，这在性能上更有优势。但如果你用的是大项目，CSS Modules可能会带来更多文件和代码，反而增加构建时间。而CSS-in-JS方案，如emotion，虽然灵活，但会在服务端渲染时生成额外的JS代码，影响首屏性能。

五 适用场景与局限性
Tailwind CSS适合快速开发和响应式布局，尤其在小型到中型项目中能节省大量时间，但它的配置复杂度较高，不太适合需要高度定制的项目。CSS Modules适合大型项目，能有效隔离样式作用域，但会增加开发和维护成本。而CSS-in-JS方案如emotion，虽然灵活，但在SSG模式下可能会影响性能，且需要额外插件支持。如果你正在用Next.js 13的App Router，推荐优先使用Tailwind CSS或者CSS Modules，因为它们能更好地适配现代架构。但如果你需要全局样式或者动态样式注入，CSS-in-JS可能还是有它的价值。

六 替代方案或进阶技巧
如果你不想用Tailwind或者CSS Modules，可以尝试使用PostCSS插件来管理样式，比如postcss-apply、postcss-preset-env等。这些插件能帮助你更灵活地处理CSS代码，但需要一定的学习成本。另外，你也可以使用SCSS或者Less等CSS预处理器，配合Next.js的构建流程，这样能让你更自由地编写复杂样式。在某些情况下，我会用CSS变量来代替全局样式，这样既能保持样式隔离，又能方便地进行主题切换。

七 技术背景与核心概念
Tailwind CSS的引入是Next.js近年来最重大的变革之一。它允许开发者通过工具化的方式快速生成CSS类，从而避免手动编写冗余样式。Tailwind的配置文件可以自定义颜色、字体、间距等参数，但需要配合PostCSS和Webpack来实现。Tailwind的优点在于它的响应式系统和可定制性，但缺点是CSS文件体积较大，需要优化。CSS-in-JS方案如emotion和styled-components，它们通过JS生成CSS，使得样式更灵活，但这种灵活性在SSG模式下会带来额外的性能成本。

八 具体操作方法或配置步骤
使用Tailwind CSS时，首先要确保你的Next.js项目版本支持13或更高。然后安装tailwindcss、postcss、autoprefixer等依赖。在postcss.config.js中配置tailwind的规则，比如module.exports = { plugins: [require('tailwindcss'), require('autoprefixer')] }。接着在tailwind.config.js里定义主题，如colors、screens等。在页面中使用时，只需要在HTML元素上添加class属性，如class="bg-blue-500 text-white"。若想自定义Tailwind的配置，比如添加自定义颜色，可以在tailwind.config.js里修改theme.colors对象。

九 常见踩坑场景与避坑方案
在使用Tailwind时，最容易出问题的就是样式未正确预处理。比如你在next.config.js里配置了tailwind的路径，但在代码中引用了错误的文件路径，就会导致样式不生效。另外，Tailwind的preflight配置如果没正确设置，可能会导致全局样式缺失。我之前遇到过一个案例，因为没正确配置preflight，导致字体样式无法加载，页面出现乱码。遇到这种情况，需要检查tailwind.config.js里的preflight选项是否正确。

十 性能影响或效率对比
Tailwind CSS的性能表现取决于项目的规模和构建配置。在Next.js中，Tailwind会通过代码分割和动态导入来优化性能，但生成的CSS文件体积通常较大，尤其在使用了大量自定义颜色和字体的情况下。CSS Modules在性能上更有优势，因为它们只生成当前组件所需的样式，而不会影响其他页面。不过，如果你使用的是Next.js 13的App Router，CSS Modules可能无法和Layout组件完美兼容，需要额外配置。

十一 适用场景与局限性
Tailwind CSS更适合需要快速构建响应式布局的项目，尤其是中小型项目。但在大型项目中，它的配置复杂度和CSS体积可能会成为瓶颈。CSS Modules适合需要严格隔离样式作用域的项目，但它的使用方式相对繁琐，且在某些情况下可能会影响组件的可复用性。CSS-in-JS方案虽然灵活，但它们的构建流程和性能表现可能不如Tailwind或者CSS Modules，尤其在需要支持SSG的项目中。

十二 替代方案或进阶技巧
如果你不想用Tailwind，也可以尝试用PostCSS的配置来实现类似功能。比如使用postcss-apply插件，可以自动应用CSS变量和响应式规则，从而减少手动编写代码的工作量。另外，有些开发者喜欢用CSS-in-JS的方案，比如styled-jsx，但它已经被Next.js官方弃用，只能在Next.js 12中使用。如果你还在用Next.js 12，可以尝试在pages目录下使用styled-jsx，但一定要注意它的生命周期问题，否则会导致样式重复加载。

十三 技术背景与核心概念
CSS Modules在Next.js中是一个比较成熟的方案，它通过局部作用域的方式管理样式，避免全局污染。CSS Modules的基本原理是通过哈希来生成唯一的样式类名，这样就能确保每个组件的样式不会互相干扰。它的优点在于可维护性和可预测性，但缺点是需要额外的工具链配置。在使用CSS Modules时，还需要注意样式文件的导入方式，否则可能会出现样式不生效的问题。

十四 具体操作方法或配置步骤
在Next.js中使用CSS Modules，你只需要在组件中导入样式文件，如import styles from './page.module.css'，然后在HTML元素上加class={styles.className}。在next.config.js中，你需要配置webpack的规则，将CSS Modules的文件类型识别出来。比如添加一个规则：{ test: /\.module\.css$/, use: [ 'style-loader', { loader: 'css-loader', options: { modules: true } } ] }。这样配置后，CSS Modules就能正常工作。你还可以通过PostCSS来进一步优化CSS Modules的样式，比如添加兼容性前缀。

十五 常见踩坑场景与避坑方案
使用CSS Modules时，最常见的问题是样式未正确加载。比如你忘记添加.module.css的后缀，或者在导入路径上出错，就会导致样式无法应用。另外，在App Router中使用CSS Modules时，要注意样式的作用域是否正确，否则可能会出现样式污染。我之前遇到过一个情况，因为组件嵌套结构复杂，导致样式没有正确继承，后来才知道需要使用scoped样式或者在样式文件中使用class名命名规范。CSS Modules的样式文件如果被错误地打包，也可能导致性能问题。