Next.js × microCMSでリッチエディタで書いた記事の画像にloading属性を付ける

記事中にある img タグに loading="lazy" 属性を付けて、画像を遅延読み込みするようにします。

ライブラリ追加

jsdom というライブラリを使います。jsdom はHTMLパーサにDOM APIを追加したものらしい。類似のライブラリで cheerio というものがあり、最初はこっちを使ってましたが、jQueryっぽい書き方が馴染まなかったりして、jsdom を使うことにしました。

yarn add jsdom @types/jsdom

imgタグにloading属性をつける

記事詳細ページの getStaticProps で以下のように書きます。必要な部分だけ抜き出しています。
jsdom で img タグを取得し、それらに対して loading 属性を追加するようにしています。

import { JSDOM } from 'jsdom'

export const getStaticProps: GetStaticProps<StaticProps> = async (context) => {
  const { params, previewData } = context
  if (!params?.category || !params?.id) {
    throw new Error('Error: ID not found')
  }

  try {
    const id = toStringId(params.id)
    const data = await client.get({
      endpoint: 'blog',
      contentId: id,
    })
    
    // この辺り追加
    const dom = new JSDOM(data.content)

    dom.window.document.querySelectorAll('img').forEach((element) => {
      element.setAttribute('loading', 'lazy')
    })
    const body = dom.window.document.body.innerHTML

    const category = await client.get({
      endpoint: 'blog-category',
    })

    return {
      props: {
        blog: data,
        body: body,
        category: category.contents,
        currentCategory: toStringId(params.category),
      },
    }
  } catch (e) {
    return { notFound: true }
  }
}

簡単ですが、これで記事の画像を遅延読み込みできるようになりました。

参考サイト

こちらの方の記事にあるGitHubのコードを参考にしました。
microCMSブログのNext.js版を作成した