应根据项目目录结构判断：存在pages/且无app/目录时用_pages/_app.tsx；存在app/目录时用app/layout.tsx；两者共存则分别生效，App Router优先级更高。
必须在 _app.tsx（Pages Router）或 app/layout.tsx（App Router）中顶层静态导入，其他任何位置都会构建报错或样式丢失。
怎么判断该用 _app.tsx 还是 app/layout.tsx？
看项目结构：
- 存在
pages/目录且没有启用 App Router（即next.config.js未配置experimental.appRouter: true，且无app/目录），就用pages/_app.tsx - 存在
app/目录（哪怕只有app/layout.tsx），Next.js 就按 App Router 运行，_app.tsx被完全忽略 - 同时有
pages/和app/？两者共存但互不干扰：Pages 页面走_app.tsx，App 页面走app/layout.tsx
为什么 import 放在组件里会报错？
Next.js 在构建时需提前提取全局样式并注入 <head>，而组件内部的 import 属于运行时行为，Webpack/Next 编译器无法识别为“全局依赖”。
- ❌ 错误：在
MyApp函数体内写import '../styles/globals.css' - ❌ 错误：用
useEffect或if (process.browser)动态加载 - ✅ 正确：必须是文件最顶部第一行语句，前面不能有任何代码、注释甚至空行（尤其
_app.tsx）
路径和文件本身有哪些硬性要求？
路径错、后缀错、内容错，都会导致构建失败或样式不生效。
立即学习“前端免费学习笔记（深入）”；
- 路径必须是相对路径：
import '../styles/globals.css'（_app.tsx下）或import './globals.css'（app/layout.tsx下），不能用/styles/globals.css - CSS 文件不能含
:global、不能是.module.css、也不能被next.config.js中的cssModules: { auto: true }拦截为模块 - 若用 Tailwind，
@tailwind base、@tailwind components、@tailwind utilities必须都在同一个 CSS 文件内，不能拆开再分别import - PostCSS 配置（如
postcss.config.mjs）必须正确启用@tailwindcss/postcss，否则@tailwind指令解析失败
最容易被忽略的是：开发时热更新可能让样式“看起来生效”，但 next build 后全局 CSS 完全消失——问题往往出在路径没对、_app.tsx 实际未被加载，或你以为在用 Pages Router 其实早已切到 App Router。
