移除 NextJS 12 中 Image 上的 <span/> 元素

前言

以下問題僅會發生在 NextJS 13 以前的版本，NextJS 13 的 Image 已經移除包 <span/> 在外層的做法了

最近公司專案正在用 NextJS 12 重構原有的 CRA 專案，而大多數 css 樣式都是從舊專案直接先搬過來沿用，使用 Next/Image 的諸多好處相信網路上有很多資料，這裡就不多加贅述了。

然而剛開始著手開發，就發現大部分圖片在使用了 Next/Image 後都會發生跑版，吃不到 css 等問題，研究了一下才發現，原來在 NextJS 12 中的 Next/Image 會在 <img/> 元素的外層再包一層 <span/>，如下：

<span>
  <img/>
</span>

原本以為要修改整份 css，幸好目前是有方法可以解決，於是便有了這篇文。

next/future/image

在 NextJS 12.2 以後 ( 沒錯，如果不到這個版本的話，需至少更新到 12.2 )，官方開始提供實驗性的 next/future/image，以下是官方文件中所提到的改動：

• Renders a single <img> without <div> or <span> wrappers
• Added support for canonical style prop
• Removed layout, objectFit, and objectPosition props in favor of style or className
• Removed IntersectionObserver implementation in favor of native lazy loading
• Removed loader config in favor of loader prop
• Note: no fill mode (yet) so width & height props are required

完整的文件 在這。

最重要的資訊已經在第一條內容了，接著提提如何使用：

NextJS 12.2x

在 12.2x 版本中，要使用此元件需去 next.config.js 開啟實驗性功能：

module.exports = {
    experimental: {
        images: {
            layoutRaw: true
        }
    }
};

接著直接 import 使用：

import Image from "next/future/image";

NextJS 12.3

在 12.3 版之後，因為此功能不再是實驗性，所以不需要再去 next.config.js 做設定，直接使用即可：

import Image from "next/future/image";

NextJS 13

NextJS 13 之後官方已經將 12 版的 next/future/image 作為正式 next/image 使用，所以在 NextJS 13 後預設就不會再有此行為！

結語

要注意的是，12.2x 與 12.3 的 Image 仍存在一些差異，建議使用前還是根據當前版本閱讀下官方文件，底下會放上各版本的 Blog 文章，有興趣可以再去看看！

參考資料來源

• Blog-NextJS 12.2
• Blog-NextJS 12.3
• Blog-NextJS 13