全新创建的NextJS App未做任何修改 运行npm run dev即报错如何解决

1. 解决核心全局CSS导入错误 #

你遇到的这个报错属于Next.js 11.1.1版本的已知bug，仅出现在Windows环境下：系统路径默认使用反斜杠\时，Next.js的样式导入校验逻辑会误判pages/_app.js中的全局CSS导入不属于自定义App文件，即使你没有修改初始化的默认代码也会触发。
可按优先级选择以下方案解决：

• 方案1（最推荐）：升级Next.js到11.x分支的最新维护版本，该版本已修复路径解析问题，执行命令：

  npm i next@11.1.4
  

  升级完成后如果仍有异常，删除项目下的node_modules文件夹和package-lock.json文件，重新执行npm install安装依赖即可。
• 方案2（保留当前版本）：手动检查pages/_app.js中的全局CSS导入语句，确保路径全部使用正斜杠/，写法为import '../styles/globals.css'，同时确认pages文件夹下的入口文件命名为全小写的_app.js，无大小写或拼写错误。
• 方案3（临时规避）：删除_app.js中的全局CSS导入语句，所有样式改用组件级CSS Modules实现。

2. 处理webpack弃用警告 #

DEP_WEBPACK_MODULE_ISSUER属于依赖的webpack版本的弃用提示，不影响项目正常运行，无需强制处理。如果需要消除警告，可将开发启动命令修改为：

node --no-deprecation node_modules/.bin/next dev

升级到Next.js 12+版本也会自动消除该警告。

修改完成后重新执行npm run dev即可正常启动开发服务。

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