怎样在Next.js App Router中优雅组织全局CSS代码-css教程-PHP中文网

全局CSS只能在app/layout.tsx顶层静态导入；App Router下_pages/_app.js已弃用，import必须为首行语句且不可加'use client'，否则SSR样式注入失败。

怎样在next.js app router中优雅组织全局css代码

全局CSS只能在 `app/layout.tsx` 顶层静态导入

Next.js App Router 下，_app.js 已被完全弃用，任何在 pages/_app.js 里写的全局 CSS 导入都会被忽略，甚至触发构建警告。唯一合法且生效的位置是 app/layout.tsx 的最顶部（即文件第一行 import），且不能加 'use client' —— 因为样式注入是服务端行为，加了反而会阻断 SSR 阶段的样式收集。

常见错误现象：

Global CSS cannot be imported from files other than your Custom _app.js：说明你误用了 Pages Router 的规则，或路径写错
样式在开发时可见、构建后丢失：大概率是 import 写在了 export default function RootLayout 函数体内，或前面有其他语句（包括注释）
Tailwind 指令不生效：比如 @tailwind base 没出现在导入的 CSS 文件中，或该文件被 postcss.config.js 错误地处理为模块

正确姿势：

把全局样式统一收口到 app/globals.css（官方推荐路径）
在 app/layout.tsx 第一行写 import '@/app/globals.css'
确保该 CSS 文件只含标准 CSS 规则或 @tailwind 指令，不含 :global 或 module 相关语法

`globals.css` 里该放什么、不该放什么

这个文件本质是“全局作用域入口”，不是设计系统抽象层。它适合放：

CSS reset 或 normalize 规则（如 * { margin: 0; padding: 0; }）
HTML 元素默认样式（a { color: inherit; text-decoration: none; }）
Tailwind 的三段式指令：@tailwind base;、@tailwind components;、@tailwind utilities;
少量真正跨全站的类名，比如 .sr-only、.visually-hidden

不适合放：

CSS

CSS 官方网站入口。访问 W3C 的 CSS 页面，查看 CSS 标准、学习资料与工作组动态；CSS 是 Web 标准，无需下载安装。

下载

组件级样式（如 .button {}）—— 应该走 CSS Modules 或 styled 方案
主题变量或 CSS 自定义属性定义（:root { --color-primary: #0070f3; }）—— 这些更适合放进 stitches.config.ts 或 theme.ts 等 JS 配置中，便于类型安全和 SSR 提取
媒体查询封装（如 @media (min-width: 768px) { ... }）—— 容易失控，响应式逻辑应交给组件自身或工具函数（如 Stitches 的 bp）

为什么不能在组件里 import 全局 CSS

Next.js 在构建期会对 CSS 依赖做静态分析，只有 app/layout.tsx 的顶层 import 才会被识别为“需要提取并注入到的全局样式”。其他位置的导入，比如：

在 app/page.tsx 里写 import '../styles/global.css' → 构建报错
在 Client Component 中动态 import('./Button.css') → 报 CSS cannot be imported dynamically
在 useEffect 里通过 insertRule 注入样式 → SSR 阶段无样式，首屏闪动

根本原因不是“语法不允许”，而是 Next.js 的服务端样式抽取（CSS SSR）机制只扫描根布局的顶层依赖。绕过它等于放弃 SSR 样式支持，对 SEO 和首屏性能是硬伤。