Next.js Image组件使用layout属性触发遗留特性警告求助

问题代码 #

<div className={`w-5 h-5 relative flex-shrink-0 ${additionalClasses}`}>
    <Image src={icon} layout="fill"/>
</div>

触发的警告 #

Image with src "/_next/static/media/..." has legacy prop "layout". Did you forget to run the codemod?

解决方案 #

在Next.js 13及以后的版本中，next/image组件的layout属性已被废弃，需使用新版属性组合替代layout="fill"的效果：

• 添加布尔属性fill（无需赋值）
• 可选配置objectFit属性控制图片的缩放方式（如contain、cover，根据视觉需求调整）
• 父容器需保持position: relative（你的代码中已通过relative类实现，无需修改）

修改后的代码：

<div className={`w-5 h-5 relative flex-shrink-0 ${additionalClasses}`}>
    <Image src={icon} fill objectFit="contain" />
</div>

批量迁移方案（旧项目） #

如果是Pages Router的旧项目，可通过官方codemod工具自动批量迁移所有旧版Image组件用法：

npx @next/codemod@latest next-image-to-legacy-image ./pages

但更建议逐步迁移到新版组件写法，避免后续版本兼容性问题。

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