Next.js 13+ app目录下CSS生效需严格遵循导入规则：仅app/layout.tsx中import './globals.css'有效；非模块CSS不可在组件内导入；CSS Modules必须用.module.css后缀并按对象使用；删除next.config.js中冗余css配置；Tailwind需配置content路径；禁用_custom Document，所有样式注入须通过layout顶层import实现。
Next.js 13+ 中 app 目录下怎么让 CSS 生效
服务端渲染（SSR）时 CSS 不生效，不是你漏写了 import，而是 Next.js 的 app 目录强制要求 CSS 必须作为模块入口被“消费”——它不支持传统 link 或全局 import 注入。
-
app/layout.tsx里直接import './globals.css'是合法的，且是唯一推荐方式；其他位置（比如组件内部）import非模块 CSS 会被忽略 - 如果用了
css_modules（Button.module.css），必须通过import styles from './Button.module.css'+className={styles.xxx}使用，不能靠文件名自动注入 - 动态
import()加载的组件里写import './xxx.css'无效，CSS 不会随组件 SSR 到 HTML 中
为什么 next.config.js 里的 cssModules 配置没起作用
Next.js 默认已启用 CSS Modules 支持，next.config.js 中显式配置 cssModules: true 不仅多余，还可能触发旧版行为兼容逻辑，导致 .module.css 文件被当作普通 CSS 处理（类名不哈希、无作用域）。
- 删除
next.config.js中所有与css、cssModules、postcss相关的自定义配置，除非你明确需要 PostCSS 插件或 CSS-in-JS 替代方案 - 确认文件名后缀是
.module.css（不是.css或.modules.css），Next.js 只认这个命名约定 - 如果用了 Tailwind，确保
tailwind.config.js的content字段包含app/**/*.{js,ts,jsx,tsx}，否则 class 名在生产环境可能被 PurgeCSS 误删
Link 组件预加载 CSS 时样式闪动（FOUC）
用 next/link 跳转到新页面时，CSS 还没加载完就渲染了 HTML，用户看到未样式化的 DOM —— 这不是 JS 执行慢，而是 Next.js 默认不把 CSS 当作关键资源同步注入首屏 HTML。
- 确保所有 CSS 都通过
app/layout.tsx或app/[...]/layout.tsx的顶层import引入，Next.js 会自动提取并内联关键 CSS 到 - 避免在
useEffect或事件回调中动态import('./async.css')，这种加载无法参与 SSR 流程，必然 FOUC - 如果用了第三方 UI 库（如 MUI、Ant Design），检查它们是否提供 Next.js 适配的
ServerStyleSheets或extractCritical方案；否则其 CSS 通常只在客户端注入
自定义 Document 还能用吗？
不能。在 app 目录下，pages/_document.tsx 完全失效；Next.js 不再允许你手动操作 或 结构 —— 所有 CSS 注入、字体预加载、meta 标签都必须走 app/layout.tsx 或 app/head.tsx（后者已废弃，仅支持 metadata 对象）。
- 想加全局
？不行，必须用import引入本地 CSS 文件 - 想内联一段 critical CSS？只能写在
app/layout.tsx的里，但注意：该是 React 组件，不是 HTML 模板，不支持原生标签直接写字符串 - 真正需要定制
属性（比如lang或data-theme）？用export const metadata = { ... }控制基础信息，其余靠 JS 在客户端补全
事情说清了就结束。最常被卡住的点其实是：以为 CSS 和以前一样“放哪都行”，结果 app 目录把它变成了严格依赖导入路径和文件命名的编译时产物——错一个字母，样式就消失，还没报错。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
