Next.js执行npm run build时Webpack找不到静态图片

问题描述 #

Next.js项目中导入静态图片后，npm run dev运行正常，但执行npm run build或next build时编译失败，无法部署到Vercel；且构建尝试后，npm run dev也无法正常启动。

环境信息 #

next info
    Operating System:
      Platform: win32
      Arch: x64
      Version: Windows 10 Home
    Binaries:
      Node: 16.14.2
      npm: N/A
      Yarn: N/A
      pnpm: N/A
    Relevant packages:        
      next: 13.1.1
      eslint-config-next: N/A 
      react: 18.2.0
      react-dom: 18.2.0  

报错信息 #

Failed to compile.

HookWebpackError: File E:\Github\Project\.next\static\media\IMG_1764.59cd3605.JPG does not exist.
    at makeWebpackError (E:\Github\Project\node_modules\next\dist\compiled\webpack\bundle5.js:28:308185)
    at E:\Github\Project\node_modules\next\dist\compiled\webpack\bundle5.js:28:105236
    at eval (eval at create (E:\Github\Project\node_modules\next\dist\compiled\webpack\bundle5.js:13:28771), <anonymous>:27:1)
    at E:\Github\Project\node_modules\next\dist\compiled\webpack\bundle5.js:28:68649
    at E:\Github\Project\node_modules\next\dist\build\webpack\plugins\next-trace-entrypoints-plugin.js:437:143
-- inner error --
Error: File E:\Github\Project\.next\static\media\IMG_1764.59cd3605.JPG does not exist.
    at Job.emitDependency (E:\Github\Project\node_modules\next\dist\compiled\@vercel\nft\index.js:1:39473)
    at async Promise.all (index 10)
    at async Object.nodeFileTrace (E:\Github\Project\node_modules\next\dist\compiled\@vercel\nft\index.js:1:35430)
    at async E:\Github\Project\node_modules\next\dist\build\webpack\plugins\next-trace-entrypoints-plugin.js:136:28
    at async Span.traceAsyncFn (E:\Github\Project\node_modules\next\dist\trace\trace.js:79:20)
    at async TraceEntryPointsPlugin.createTraceAssets (E:\Github\Project\node_modules\next\dist\build\webpack\plugins\next-trace-entrypoints-plugin.js:90:9)
caused by plugins in Compilation.hooks.processAssets
Error: File E:\Github\Project\.next\static\media\IMG_1764.59cd3605.JPG does not exist.
    at Job.emitDependency (E:\Github\Project\node_modules\next\dist\compiled\@vercel\nft\index.js:1:39473)
    at async Promise.all (index 10)
    at async Object.nodeFileTrace (E:\Github\Project\node_modules\next\dist\compiled\@vercel\nft\index.js:1:35430)
    at async E:\Github\Project\node_modules\next\dist\build\webpack\plugins\next-trace-entrypoints-plugin.js:136:28
    at async Span.traceAsyncFn (E:\Github\Project\node_modules\next\dist\trace\trace.js:79:20)
    at async TraceEntryPointsPlugin.createTraceAssets (E:\Github\Project\node_modules\next\dist\build\webpack\plugins\next-trace-entrypoints-plugin.js:90:9)

解决方案 #

• 清理构建缓存：删除.next文件夹和node_modules/.cache目录，重新安装依赖并构建。Windows终端执行：

  rmdir /s .next
  rmdir /s node_modules\.cache
  npm install
  next build
  

• 校验图片路径与大小写：Windows开发环境不区分文件名大小写，但构建流程会严格校验。确保代码中导入的图片路径、文件名大小写与实际文件完全一致，比如避免img_1764.jpg和IMG_1764.JPG的差异。
• 改用Next.js官方图片组件：使用next/image组件替代直接导入图片的方式，它会自动处理资源优化和路径映射，示例代码：

  import Image from 'next/image';
  import myImage from '../public/IMG_1764.JPG';
  
  export default function MyPage() {
    return <Image src={myImage} alt="示例图片" width={500} height={500} />;
  }
  

• 升级Next.js版本：Next.js 13.1.1存在静态资源构建的已知bug，升级到13.2及以上版本可修复该问题：

  npm install next@latest
  

• 检查版本控制与部署配置：确保.next目录未被添加到.gitignore导致构建资源缺失；如果使用Vercel部署，确认项目配置中静态资源目录（如public）被正确识别。

内容的提问来源于stack exchange，提问作者A.Taghavi