NextJS中_app.js引入的全局样式未生效问题咨询

我新建了NextJS项目，按照官方文档的「添加全局样式表」步骤操作，但全局样式完全未生效，页面body元素的样式为空。以下是我的代码与项目信息：

代码与项目信息 #

_app.js 文件 #

import "../global.css";

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

global.css 文件 #

body {
  font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica",
    "Arial", sans-serif;
  padding: 20px 20px 60px;
  max-width: 680px;
  margin: 0 auto;
  background-color: red;
}

index.js 文件 #

export default function Home() {
  return (
    <div>
      <p>Hello World!</p>
    </div>
  );
}

项目目录结构 #

运行npm run dev后的页面 #

排查与解决步骤 #

1. 核对_app.js的位置与命名

   • 确认文件在pages目录下，且文件名为_app.js（注意开头的下划线，NextJS对该文件名的大小写和格式有严格要求，不能写成App.js或其他变体）
   • 检查global.css的导入路径：从目录结构看../global.css路径正确，但需确认文件实际存在、文件名无拼写错误（比如不要写成globals.css）

2. 检查NextJS版本

   • 全局样式表功能要求NextJS 9.2及以上版本，运行npm list next查看当前版本，若版本过低，执行npm install next@latest升级到最新稳定版

3. 清除缓存并重启开发服务器

   • 缓存可能导致样式不更新，先停止npm run dev，删除项目根目录下的.next文件夹，再重新启动服务：
     • macOS/Linux：rm -rf .next && npm run dev
     • Windows：rd /s /q .next && npm run dev

4. 验证样式文件是否加载

   • 打开浏览器开发者工具，切换到「网络」标签，过滤CSS文件，查看是否有global.css的请求：
     • 若返回404，说明路径错误，调整_app.js中的导入路径
     • 若请求成功，检查「元素」标签中body元素的样式，确认是否有其他样式覆盖了全局样式

5. 排除样式方案冲突

   • 确保全局样式文件没有使用[name].module.css的命名格式（该格式是CSS Modules专用，会导致全局样式失效），当前global.css命名符合要求，无需修改

内容的提问来源于stack exchange，提问作者Moaaz Assali