必须先确认使用 pages router 还是 app router：存在 pages/_app.js 且无 app/ 目录为 pages router；存在 app/layout.tsx 且 next.config.js 未禁用 app router 为 app router；两者共存需分开处理。
必须先确认你用的是 Pages Router 还是 App Router，否则导入位置错一个字符，样式就完全不生效。
怎么判断自己用的是 Pages Router 还是 App Router
打开项目根目录，看这两个关键线索：
- 存在
pages/_app.js（或_app.tsx）且没有启用app/目录 → Pages Router - 存在
app/layout.tsx（或.js），且next.config.js没禁用 App Router → App Router - 两个目录都存在 → 必须分开处理：Pages 页面走
pages/_app.js，App 页面走app/layout.tsx
混用判断标准是出错的最常见原因。比如报 Global CSS cannot be imported from files other than your Custom _app.js，大概率是你在 App Router 项目里还留着 pages/_app.js 并试图往里写 import。
Pages Router：只在 pages/_app.js 顶层静态导入
Next.js 只认这个文件作为全局样式入口，且规则极严：
-
import '../styles/globals.css'必须是pages/_app.js文件的第一行，前面不能有任何语句、注释甚至空行 - 不能写在
MyApp函数体内、useEffect里，也不能用import('./styles/globals.css')动态加载 -
globals.css必须是纯 CSS 文件：不含:global、不叫globals.module.css、未被next.config.js配置为自动模块化（如cssModules: { auto: true }） - 如果用了 Tailwind，
@tailwind base、@tailwind components、@tailwind utilities必须全部写在这个文件里，不能拆开
App Router：只在 app/layout.tsx 顶层导入
_app.js 在 App Router 下完全无效，强行保留还会干扰构建：
- 路径推荐用
app/globals.css，然后在app/layout.tsx第一行写import './globals.css' - 不能加
'use client'—— CSS 导入是服务端行为，加了反而可能阻断 SSR 样式注入 - 该导入只影响
app/下的路由，对pages/下的页面毫无作用 - 如果混用双路由，
pages/index.js不会自动继承app/globals.css，得另配pages/_app.js
常见报错和绕不开的坑
这些错误几乎都源于路径、时机或配置错位：
-
Global CSS cannot be imported from files other than your Custom _app.js：大概率你用的是 App Router，却还在pages/_app.js里写导入 - 样式生效但刷新后丢失：CSS 文件里用了
@layer或其他 PostCSS 特性，但没配postcss.config.js - 页面空白或布局错乱：全局 CSS 里写了
body { display: none }这类重置规则，没意识到它会影响所有路由 - 热更新不生效：修改
globals.css后没触发重新构建，或文件被缓存；检查是否意外启用了cssModules: { auto: true }
最容易被忽略的一点：全局 CSS 的“全局”是按路由系统隔离的。app/layout.tsx 导入不会泄漏到 pages/，反之亦然。别指望一次导入覆盖整个项目。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
