2020年1月22日にmicroCMSのAPIレスポンスに画像のwidthとheightが含まれるようになりました！ これによって、今までは動的に画像を差し込む際に、imgタグにwidthとheightを指定できなかったのが、 指定できるようになりました。 それを有効活用できるものとして、next/imageがあると思いますので、そのやり方を解説します。 (2021/07/28 更新) Next.js ver.11 に対応しました。

まずは実装コードをご覧ください。 <code>MicroCMSImage.tsx</code> <pre><code>import Image, { ImageProps } from 'next/image'
import React from 'react'

type Props = Omit&lt;ImageProps, 'src' | 'width' | 'height' | 'layout'&gt; &amp; {
 src: string
 width: number
 height: number
 layout?: 'fixed' | 'intrinsic' | 'responsive'
}

const MicroCMSImage: React.VFC&lt;Props&gt; = ({ src, layout, alt, ...imageProps }) =&gt; (
 &lt;Image
 {...imageProps}
 src={src}
 layout={layout ?? 'responsive'}
 placeholder="blur"
 blurDataURL={`${src}?auto=compress&amp;w=10`}
 alt={alt}
 /&gt;
)

export default MicroCMSImage</code></pre> <code>next.config.js</code> <pre><code>module.exports = {
 images: {
 loader: 'imgix',
 path: '',
 },
}</code></pre> このコンポーネントを呼び出す側では <pre><code>&lt;MicroCMSImage src={Image.url} width={Image.width} height={Image.height} /&gt;
// ImageはmicroCMSから取得した画像データです。</code></pre> のように使います。

next/imageを使うと、自分で実装すると意外と面倒なポイントをこなしてくれるので、 積極的に使っていきたいですね。 特に、noscriptの処理や placeholder画像をimgタグのonloadイベントが完了したタイミングで非表示にしてくれたり、 細かい気遣いみたいなポイントが散りばめられている点がとても助かっています。 また、microCMSでの画像登録をリッチエディタからやっている場合はこの方法ではできないため、 もう少し工夫する必要があります。 その際は以下のライブラリが便利なので、ご活用ください。 <a href="https://github.com/dc7290/microcms-richedit-processer" target="_blank" rel="noopener noreferrer">https://github.com/dc7290/microcms-richedit-processer</a>

1月22日にmicroCMSのAPIレスポンスに画像のwidthとheightが含まれるようになりました！これによって、今までは動的に画像を差し込む際に、imgタグにwidthとheightを指定できなかったのが、できるようになりました。それを有効活用できるものとして、next/imageがあると思いますので、そのやり方について解説します。

next/imageにおいてmicroCMSで登録した画像を使う

こちらの記事はZenn.devに公開していますのでお手数ですが、以下のリンクをご参照ください！ <a href="http://zenn.dev/d_suke/articles/0fc7670b2da750f6dd87" target="_blank" rel="noopener noreferrer">http://zenn.dev/d_suke/articles/0fc7670b2da750f6dd87</a>

Linkコンポーネントではなくnext/router から提供されるuseRouterを使ってrouter.push()で遷移させる時があるかと思います。こちらの方法でも prefetch するには、router.prefetch()を行う必要があります。これをLinkコンポーネントと同様の方法で、楽にできたらいいなと思い、一連のロジックをカスタムフックに隠蔽しました。

router.push()でもprefetchしてスムーズにページ遷移したい、を叶えるカスタムフックを作りました。

Nuxt.jsで作ったこちらのブログをNext.jsで作り直しました！ デザインも一新して、雰囲気もガラリと変えました！ 前回はVuetifyを使っていたのですが、今回はTailwnd cssを使ってスタイリングしてます。 デザインに関しては、XDのデザインテンプレートを参考に自分で組んでいます。 この記事では技術要件や、使ったサービスについてまとめていきます。 また、コードはGithubにて公開しています。 <a href="https://github.com/dc7290/d-suke-notebook-blog" target="_blank" rel="noopener noreferrer">https://github.com/dc7290/d-suke-notebook-blog</a>

フロントエンド、バックエンド、使ったサービスに分けて紹介させていただきます。

Next.js 前回はNuxt.jsで作っていましたが、Next.jsとの違いやメリットなどを調べるために 採用しました。 今回使ってみた中でNext.jsの方がすごいなと思った点は<ul><li>パフォーマンスを上げやすい</li><li>typescriptとの相性が良くて、型推論が効きやすい</li></ul>typescriptに関してはNext.jsというよりはReactの利点なので、取り上げることではないかもですが、 パフォーマンスに関してはNuxt.jsよりも優れているのかなーと思います。 Next.jsの方がページごとに最適化されていて、不必要なファイルがバンドルされないようになっていたり、 getServerSidePropsなどでしか使われていないライブラリをクライアントにバンドルされないようにしていたりと、 かなり精密にチューニングされている印象でした。 Nuxt.jsの場合、実装者側で気をつけないと、ただコーディングしているだけだと いくらでもパフォーマンスが悪くなるので、そこはNext.jsに分があるなと思います。 pathpida ディレクトリ構造から内部リンクを取得できるライブラリであるpathpidaを採用しました。 Next.js(Nuxt.jsにも対応されている)に最適化されているおかげで、 設定もなしで使えるのがかなりストレスフリーですごいなーという感じでした。 クエリに関してもpageのファイルからエクスポートでするだけで、指定できたり開発者体験がかなり良かったですね。 tailwind css Vue.jsがcssを書きやすいのと違って、Reactの場合はcssが書きにくい（と個人的に思っていますw）ので、 ほぼcssを書かなくてよくなると評判のtailwind cssを使いました。 今回はReactだから、という理由で使ったのですが、使い心地がマジで良くて、 今後、Vue.jsで何か作る時も使っていきたいなと思います！ ユーティリティファーストとReactやVueのようにコンポーネント指向の相性がすごいですね。。。

バックエンドといっても基本的にはRead要件しかないようなものになるので、単純な構成です。 microCMS コンテンツ管理に引き続きmicroCMSを使わせていただいています。 Next.jsのAPI Routes 検索機能やプレビュー機能に標準のAPI機能を使っています。 最初はFirebase Funcionsを使おうかと思っていたのですが、 Vercelにデプロイするなら自動的にサーバーレスファンクションになることを知って、こちらを使用することにしました。

Vercel Next.jsとの相性を考えて、Vercelにデプロイすることにしました。 もともとNext.jsがVercelのプロダクトだということもあり、かなりスムーズにデプロイできました。 CI/CDも特に何も設定しなくてもできるのがめちゃくちゃ便利で、特にブランチごとにデプロイしてくれるのが最高でしたねw

今回のリニューアルの際に今まではあったサムネイル画像をやめました。 これは、記事を書こうと思った時に画像を作らないといけないのが重荷になってしまっていたからです。 これでは本末転倒だなと思い、いっそなしにしました。 見栄えだけでなく、更新のことも考慮して設計しないといけないんだな、と勉強になりました。 これからはもう少し頻度を上げて、僕と同じところで詰まった人に少しでも助けになるような記事を 書いていけたらと思っていますので、引き続きよろしくお願いします！

Nuxt.jsで作ったこちらのブログをNext.jsで作り直しました！デザインも一新して、雰囲気もガラリと変えました！前回はVuetifyを使っていたのですが、今回はTailwnd cssを使ってスタイリングしてます。デザインに関しては、XDのデザインテンプレートを参考に自分で組んでいます。この記事では技術要件や、使ったサービスについてまとめていきます。また、コードはGithubにて公開しています。https://github.com/dc7290/d-suke-notebook-blog

でぃーすけの個人的備忘録

Next.js

next/imageにおいてmicroCMSで登録した画像を使う

router.push()でもprefetchしてスムーズにページ遷移したい、を叶えるカスタムフックを作りました。

本ブログをリニューアルしました。

All Category