web
Next.js × microCMSでリッチエディタで書いた記事の画像にloading属性を付ける
公開日:2022年1月30日
最終更新日:2022年1月30日
記事中にある 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版を作成した
Read next
- 2022年1月23日Next.js × algoliaで検索機能を実装する
- 2022年1月15日Next.js × microCMS × VercelでOGP画像をブログのタイトルで自動生成する
- 2021年12月19日Next.jsとmicroCMSで動的にRSSフィードを生成する
- 2021年11月20日Next.js × microCMSでカテゴリ一覧ページを作る