next.js 在某些版本中存在 css 文件被重复解析和注入的问题，导致样式冲突、渲染异常或 devtools 中出现重复样式表，本文详解其根本原因及稳定可靠的解决方法。
next.js 在某些版本中存在 css 文件被重复解析和注入的问题，导致样式冲突、渲染异常或 devtools 中出现重复样式表，本文详解其根本原因及稳定可靠的解决方法。
在使用 Next.js 进行项目迁移（如从 CRA 或纯 React 项目升级）时，开发者常遇到一个看似诡异的现象：CSS 文件（尤其是全局 CSS 或组件级非模块化 CSS）在浏览器 DevTools 的 <head> 中被加载两次，且文件名不同（例如 main.css 和 main.module.css 混合出现，或同一 CSS 内容以不同 hash 后缀重复注入）。正如问题中所示，即使 Header（使用 CSS Modules）和 Footer（使用普通 .css）仅在根布局（app/layout.tsx）中各引入一次，最终页面仍会呈现双重样式规则，造成视觉错乱或覆盖失效。
该问题并非由代码结构错误引起（如重复 import、多次 <link> 手动插入或 SSR/CSR 不一致），而主要源于 Next.js 特定版本（尤其是 v13.4.x 至 v14.0.x 早期）中 CSS 处理管道的内部缺陷：
- 构建阶段（build time）与开发服务器热更新（dev server HMR）对 CSS 的处理逻辑不一致；
- 全局 CSS（如 app/globals.css）与组件内 import './Footer.css' 被同时纳入 Webpack/Vite 的样式处理链路，触发重复收集与注入；
- 即使采用 CSS Modules，若未严格遵循 Next.js 的推荐模式（如将模块化样式仅用于客户端组件且避免服务端动态 import），也可能加剧该现象。
✅ 可靠解决方案：升级 Next.js 版本
截至 2024 年，该问题已在 Next.js v14.2.0+ 中得到彻底修复。请执行以下操作：
# 使用 npm npm install next@latest react@latest react-dom@latest # 或使用 pnpm pnpm add next@latest react@latest react-dom@latest # 验证版本 npx next --version # 应输出 ≥ 14.2.0
升级后，重启开发服务器（npm run dev），并检查浏览器 DevTools → Elements → <head> 区域，重复的 CSS <link> 标签将消失，样式行为恢复预期。
⚠️ 补充注意事项：
立即学习“前端免费学习笔记（深入）”；
- 避免混合使用全局 CSS 与组件内 CSS 引入：在 app/ 目录下，优先将所有样式统一收口至 app/globals.css，或严格使用 CSS Modules（.module.css）配合 "use client" 组件；
- 禁用实验性 CSS 功能：检查 next.config.js，确保未启用已废弃的配置（如 experimental.cssImport）；
- 清除缓存再验证：升级后执行 rm -rf .next && npm run dev，防止旧构建产物干扰；
- 服务端组件限制：Next.js 的服务端组件（RSC）不支持直接 import 非模块化 CSS，若在服务端组件中写 import '../styles/footer.css'，Next.js 会静默忽略或触发警告——这是设计约束，而非 bug，务必移至客户端组件或 globals.css。
总结而言，CSS 重复加载是 Next.js 版本演进过程中的阶段性兼容问题，而非项目代码缺陷。保持框架版本更新（建议锁定 next@^14.2.5 或更高稳定版），配合规范的样式组织方式，即可一劳永逸规避此类问题，专注业务开发。
