如何在Next.js 15中正确引入全局CSS

Next.js 15 中全局 CSS 只能通过 app/layout.tsx（App Router）或 pages/_app.tsx（Pages Router）顶层静态导入；判断依据是项目目录结构：有 app/ 目录则用 app/layout.tsx，仅含 pages/ 目录则用 pages/_app.tsx，两者共存时各自独立生效。

Next.js 15 中全局 CSS 只能通过 app/layout.tsx（App Router）或 pages/_app.tsx（Pages Router）顶层静态导入，其他任何位置都会触发 Global CSS cannot be imported from files other than your Custom _app.tsx 或类似构建错误。

怎么判断该用 app/layout.tsx 还是 pages/_app.tsx？

看项目目录结构，不是看 Next.js 版本号：

1. 有 app/ 目录（哪怕只有 app/layout.tsx），就用 app/layout.tsx —— _app.tsx 被完全忽略
2. 只有 pages/ 目录、没有 app/，才用 pages/_app.tsx
3. 两者共存？pages/ 下的路由走 _app.tsx，app/ 下的路由走 app/layout.tsx，互不干扰

app/layout.tsx 里怎么写才不报错？

必须满足三个硬性条件，缺一不可：

1. import 语句必须在文件最顶部第一行，前面不能有任何代码、注释甚至空行
2. 路径必须是相对路径：import './globals.css'（推荐放 app/globals.css）或 import '../styles/globals.css'
3. CSS 文件不能含 :global、不能是 .module.css、不能被 next.config.js 中的 cssModules: { auto: true } 拦截为模块

错误示例：import('./globals.css')（动态）、if (true) { import './globals.css' }（条件）、import 'styles/globals.css'（绝对路径解析失败）

为什么开发时看着好使，next build 后样式全没了？

热更新会掩盖路径和加载时机问题，但构建阶段暴露真实逻辑：

1. _app.tsx 实际没被加载（比如你误以为用 Pages Router，其实项目已启用 App Router）
2. 路径写错：比如 app/layout.tsx 里写了 import '../styles/globals.css'，但项目根目录下根本没有 styles/ 目录
3. CSS 文件里用了 @tailwind base 却没配 postcss.config.mjs，PostCSS 解析失败，整个文件被跳过
4. 用了 use client —— app/layout.tsx 是服务端组件，加 "use client" 会破坏 SSR 样式注入时机

第三方库 CSS（如 Bootstrap、Ant Design）怎么加？

它们本质也是全局 CSS，规则完全一样：

1. App Router：只允许在 app/layout.tsx 顶层 import，例如 import 'bootstrap/dist/css/bootstrap.min.css'
2. Pages Router：只允许在 pages/_app.tsx 顶层 import
3. 禁止在任意组件里 import 'xxx.css'，哪怕加了 "use client" —— 这会触发 document is not defined 或构建报错
4. 如果库提供 CSS Modules 版本（如 antd/es/button/style/css），可按模块方式导入，但需确保组件标记 "use client"

最容易被忽略的是：Tailwind 的 @tailwind 指令必须全部放在同一个 CSS 文件里，且该文件必须由 app/layout.tsx 或 _app.tsx 直接导入 —— 拆开、嵌套、或用 @import 分离，都会导致构建时样式丢失。