【Next.js】microCMS記事内の画像のwidthが読み込めないエラーの対処法

状況

Next.jsとmicroCMSでブログサイトを作っていますが、
画像付きの記事を投稿すると、次のようなエラーが出ました。

Image with src "https://images.microcms-assets.io/assets/ (画像のパスなど) " is missing required "width" property.

ただ、Web上に公開したときはエラーは出ませんでした。
ローカルで「npm run dev」していたときのみです。

原因

microCMS側のAPI設定で、「リッチエディタ」の設定ができていないことが原因でした。

↓この部分です

Next.jsのソースコード側で、microCMSの投稿記事のhtmlを受け取ったあと、
<img>タグをnext/imageの<Image>コンポーネントに置き換える処理をしているのですが、
その際にwidth / heightプロパティが見つからず、エラーが出ていました。

↓該当のソースコードです。
html-react-parserで、投稿記事のhtml「content」をReact要素に変換しています。

import parse from 'html-react-parser';
import Image from 'next/image';

export default function ConvertBody({ content }) {
  const displayBody = parse(content, {
    replace: (node) => {
      if (node.name === 'img') {
        const { src, alt, width, height } = node.attribs;
        const displayWidth = width > 768 ? '768px' : `${width}px`;
        return (
          <Image
            src={src}
            alt={alt}
            width={width}
            height={height}
            sizes='(min-width: 768px 768px, 100vw)'
            style={{
              height: 'auto',
              objectFit: 'contain',
              position: 'relative',
              width: displayWidth,
              maxWidth: 'calc(100vw - 30px)',
            }}
          />
        );
      }
    },
  });
  return <>{displayBody}</>;
}

対策

投稿記事を追加していくコンテンツを開き、
右上の「API設定」をクリックします。

続いて、「APIスキーマ」を選択します。

「種類」が「リッチエディタ」のものを見つけたら、「詳細設定」をクリック。

「画像のレスポンスにwidthとheightを含む」のトグルをONにします。

最後に設定を保存しておくのをお忘れなく。
これでwidth / heightプロパティが出力されるようになり、エラーは消えます！

お読みいただきありがとうございました。

参考

microCMS公式ブログ