リッチエディタ内の画像に対して、画像APIを適用する方法は？

→ リッチエディタのHTMLを書き換える方法と、繰り返しフィールドを利用する方法があります。

1. リッチエディタのHTMLを書き換えて適用する
2. 繰り返しフィールドを利用し、画像を画像フィールドに切り出して、適用する

1. リッチエディタのHTMLを書き換えて適用する

リッチエディタのHTML内のimg要素を書き換えて、パラメータを付与する方法が考えられます。

import cheerio from 'cheerio'

const getData = async () => {
  const data = await client.get({
    endpoint: 'blogs',
    　contentId: 'xxxxxxx' // コンテンツIDを指定
  })
  return data
}

export default async function Article() {

  //microCMSからコンテンツのデータを取得
  const data = await getData()

  //リッチエディタのデータをcheerioでパース
  const $ = cheerio.load(data.richEditor)

  // すべてのimg要素を探してループ
  $('img').each((_, element) => {
    const src = $(element).attr('src')
    if (src) {
      // 画像のURLを解析してURLオブジェクトに変換
      const newSrc = new URL(src)

      /* 
      URLに画像APIのパラメータを追加 
      指定可能なパラメータは以下のドキュメントを参照
      https://document.microcms.io/image-api/introduction
      */
      newSrc.searchParams.append('w', '1200')
      newSrc.searchParams.append('h', '900')
      newSrc.searchParams.append('fm', 'webp')

      // 変更されたURLをimg要素に反映
      $(element).attr('src', newSrc.toString())
    }
  })
  return (
    <div　dangerouslySetInnerHTML={ {__html: `${$.html()}`} }/>
  )
}

2. 繰り返しフィールドを利用し、画像を画像フィールドに切り出して、適用する