Next.jsのBlog記事にメイン画像を埋め込むスマートな方法

2021-03-27

チュートリアルからの変更点

以下のファイルを変更します。

まず、posts.tsで一番下の関数内のreturnにimage要素を追加します。 matterResultは記事内の文字列情報が入ります。

return {
    id,
    contentHtml,
    ...(matterResult.data as {
      date: string;
      title: string;
      image:string;
    })
  }

次に、[id].tsx内で、2箇所変更します。

1箇所目は、Post関数内の上の方で定義しているpostDataオブジェクトの型情報です。ここに先程同様、string型のimageを追加します。

postData: {
    title: string
    date: string
    image: string
    contentHtml: string
  }

2箇所目は、return文の中です。ここにimageから取得した文字列を元に画像を出力するHTMLコードを作成します。

今回は記事の日付の下にメイン画像を表示したいので、{postData.date}を出力している下に以下の文を書き込みました。

<Image
      src={`/posts/${postData.image}`}
      height={200}
      width={200}
      alt="Main Image"
    />

これで、piblic/posts/ディレクトリにあるimageの文字列に一致する画像ファイルを参照します。

Next.jsのImageコンポーネントについてはこちら。 Next.js next/image

それでは新しく記事を作ってみましょう。

posts/に新しいMarkdownファイルを作成し、ヘッダ部分に以下を書き込みます。

---
title: "Next.jsのBlog記事にメイン画像を埋め込むスマートな方法"
date: "2021-03-27"
image: "hogehoge.png"
---

hogehoge.pngという画像ファイルを用意してpublic/posts/に格納します。

これで、記事の日付の下に画像が表示されるようになりました。

この記事ページの先頭の画像も、実際にこの方法で表示させています。

というわけでNext.jsフレームワークを利用して、チュートリアルに小変更を加えて画像ファイルをスマートに表示させてみました。

毎回記事中にimgタグを書き込む手間なしで、見栄えの向上ができました。

画像サイズやスタイルなどは[id].tsx内のImageコンポーネントだけ管理すれば良いのでラクですね。全ての記事に統一感が出るようにもなりました。

categoryなどの属性も加えて、imageが指定されなかったらcategoryのデフォルト画像を出力する、といったような応用もできそうですね。

参考 : Next.jsの入門書がAmazonで購入可能です！Kindle版もあります。日本語の解説書があるのは嬉しいですね。

▼ Amazonオススメ商品

ディスプレイライトデスクライト BenQ ScreenBar モニター掛け式

スマートLEDフロアライト間接照明 Alexa/Google Home対応