2024/2/28
Next.js App Routerで動的にOpenGraphの画像を生成する
本ブログで、動的に画像を生成するための方法を共有します。
はじめに
OpenGraphは、TwitterやDiscord、SlackなどのSNSでリンクを共有した際に、 リンク先のサイトの情報を表示するためのプロトコルです。 QiitaやZennなどはページのタイトルが画像に入っていると思いますが、 今回はそれと同じような画像をNext.jsで動的に生成する方法を紹介します。
やり方
やり方としては、普通のルートで生成する方法と、apiルートを使う方法があります。
今回はapiルートを使う方法を紹介します。 普通のルートで生成する方法は、 Next.js公式ドキュメントのこちら を参照してください。
apiルートを使う場合はNext.js公式ドキュメントにはなく、Vercelの公式ドキュメントに書いてありました。 今回はこちらをもとに進めていきます。
api側の実装
まずは、画像生成するapiルートを作成します。
src
ディレクトリを使っていない方は、読み替えてください。
公式にはこのように書いてあります。
めっちゃ簡単ですね。
ただ、edge runtimeなので、ここではNodeのAPIは使えないことに注意が必要です。 これはapiルートを使わなくても同じです。
自分の場合はsearchParamsに文字の情報を渡して実装しました。
また、画像についてはVercelがプレイグラウンドを提供しているので、 自分はそれを使ってスタイリングしました。
https://og-playground.vercel.app/
ただ、フォントは異なるので、注意が必要です。 あとサイズもデフォルトだと800x400なので、各自変更してください。 自分は1200x630にしました。
自分の実装はこんな感じです。
public
ディレクトリにフォントファイルを置いて、それをfetchしています。
apiルートの中にフォントを置くことも可能ですが、 Vercelにデプロイする際にエラーになってしまいました。
サイズが大きすぎたみたいです。
public
ディレクトリに置くことで解決できました。
フォントは日本語対応してたらなんでもいいです。
自分はGoogle FontsからNoto Sans JPをダウンロードして、
その中のNotoSansJP-Bold.ttf
を使っています。
こちら からダウンロードできます。
呼び出し側の実装
今回はホームと各記事の2種類から呼び出そうと思います。
ホーム
まずはホームです。
searchParamsを設定してないので、先ほど実装したようにタイトルが ドデカくなります。
記事ページ
記事の方はpage.tsx
のgenerateMetadata
で設定します。
getPage
とgetPages
はFumadocsの機能で、
mdxのデータを取ってきてくれる関数です。
Next.jsのMetadata
ではmetadataBase
を設定することで、
プロパティ内で相対パスを使うことができます。
記事のページはこんな感じです。
最後に
結構簡単に実装できました。 Next.jsは本当に便利です。
ソースコードを全部見たい方は、本ブログ右上からGitHubリポジトリを 見てみてください。
ではまた。
Last updated on