Next.js部署Netlify时引入next/image本地图片构建报错

• Next.js项目部署至Netlify时，引入next/image组件及对应本地图片标签会触发构建报错
• 删除index.js文件中第4行图片导入代码、第15行图片渲染代码后，站点可在Netlify正常部署，但目标图片无法渲染
• 仅补全上述两行图片相关代码即可复现报错，其余代码无改动

pages/index.js #

import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.css'
import phd from "../images/phd.jpg";

export default function Home() {
  return (
    <div className={styles.container}>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <div>
        <Image src={phd} alt='' width="500" height="400"></Image>
      </div>
    </div>
  )
}

pages/_app.js #

import '../styles/globals.css'

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp

3:13:48 PM: info  - Creating an optimized production build...
3:13:56 PM: Failed to compile.
3:13:56 PM: 
3:13:56 PM: ./images/phd.jpg
3:13:56 PM: Error: Call retries were exceeded
3:13:56 PM: Import trace for requested module:
3:13:56 PM: ./pages/index.js
3:13:56 PM: > Build failed because of webpack errors
3:13:56 PM: Command failed with exit code 1: npm run build

按优先级依次尝试以下操作即可解决问题：

• 调整静态资源存放路径
  将项目根目录下的images文件夹整体移动到public目录下，删除index.js中导入phd.jpg的代码，修改Image组件的src属性为站点根路径写法：

  <Image src="/phd.jpg" alt="" width="500" height="400" />
  

  Next.js默认对public目录下的静态资源有专门的处理逻辑，从非public目录import图片容易触发构建时的资源解析异常。
• 调整构建进程内存上限
  进入Netlify站点的构建配置页面，新增环境变量NODE_OPTIONS，值设置为--max_old_space_size=4096。该报错中的Call retries were exceeded本质是构建时处理图片的worker进程内存不足意外退出，给Node进程分配4G内存即可解决大部分这类worker崩溃问题。
• 校验插件与Next.js版本匹配度
  确认项目使用的Next.js版本和Netlify自动安装的@netlify/plugin-nextjs插件版本兼容，大版本不匹配会导致静态资源处理逻辑出错。可在项目中本地安装对应兼容版本的插件作为开发依赖，覆盖Netlify的默认插件版本。
• 检查图片文件本身
  确认phd.jpg文件没有损坏、单文件体积不超过2MB，文件损坏或体积过大会导致图片处理进程崩溃，重新压缩导出正常的图片文件即可。

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