はじめに

本記事ではこちらのNewtのチュートリアルを参考にog画像の自動生成を実装します。

本記事の目的と概要

この記事の目的は、Next.jsのImage Generation機能を活用し、自動でOG画像を生成することで、ブログの執筆時間を大幅に短縮することです。OG画像を手動で作成する手間が省けるため、ブログの執筆に専念できる時間が増え、記事の質を向上させることができます。

Next.jsのImage Generationとは？

Next.jsのImage Generationは、Next.jsが提供する機能の1つで、画像を最適化し、必要に応じてサイズを調整することができます。また、動的に画像を生成することもできます。この機能は、Webアプリケーションやブログなどのサイトで、ページの読み込み速度を向上させ、ユーザー体験を向上させるために利用されます。

Next.jsを使った動的OG画像の作成方法

Newtのチュートリアルに沿って実装していきますので詳しい手順は公式チュートリアルを参照してください。

私の場合はCanvaで以下のようなテンプレートを作成しました。
こちらの画像を指定して作成するように設定しました。

ハマった点

ローカル環境での動作は問題なく出来ましたがデプロイしたあと表示すると画像が表示されませんでした。

原因

公式ページに記載がある通り、next/image の src に外部ドメインを指定するとエラーになるため正しく表示されていませんでした。。
これはNext.js標準の設定で許可していない外部ドメインは弾くようになっていました。

改善方法

next.config.jsに以下の設定を追加します。

# next.config.js
const nextConfig = {
  ...
  images: {
    disableStaticImages: true, // importした画像の型定義設定を無効にする
    domains: [
      '自身のドメイン',
    ],
  },
};

こちらの設定で正しく表示されました。

まとめ

本記事ではNext.jsのImage Generationを使って、ブログのOG画像を自動生成する方法を紹介しました。この方法を使えば、手作業で画像を作成する手間や時間を省くことができ、ブログの執筆を効率化することができます。記事を読んで、実際に手順を試してみることで、効率的なブログ執筆が可能になるでしょう。