Next.js编译报错：无法解析@/src/components/layout/Header模块

编译失败
Next.js (14.2.4) ./src/app/layout.js:3:1 模块未找到：无法解析 '@/src/components/layout/Header'

问题背景 #

两天前代码运行一切正常，关联MongoDB后开始弹出该报错，已尝试删除.next、node_modules、更新依赖等操作，问题仍未解决。

排查与解决方案 #

1. 校验路径别名配置
   打开jsconfig.json/tsconfig.json或next.config.js，确认路径别名的映射规则是否正确。如果使用@/src作为别名，配置需类似：

   // tsconfig.json 或 jsconfig.json
   {
     "compilerOptions": {
       "baseUrl": ".",
       "paths": {
         "@/src/*": ["src/*"]
       }
     }
   }
   

   若配置错误（比如把@/*映射到src/*，此时@/src/...会被解析为src/src/...），修正后重启开发服务器。

2. 核对文件名大小写
   Linux/macOS系统对文件名大小写敏感，检查layout.js中的导入路径大小写，是否与实际文件（如Header.jsx vs header.jsx）完全匹配。

3. 确认文件存在性与后缀
   根据文件结构截图，确认src/components/layout/Header文件确实存在，且后缀为Next.js默认识别的.jsx/.tsx（自定义后缀需额外配置）。

4. 检查MongoDB关联操作的配置变更
   关联MongoDB时可能误改了next.config.js、jsconfig.json等核心配置文件，导致路径别名失效。通过Git历史（若有）对比这些文件的变更记录。

5. 彻底清除缓存并重装依赖
   执行完整的缓存清理与依赖重装流程：

   rm -rf .next node_modules package-lock.json yarn.lock
   npm install
   npm run dev
   

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