【Next.js × Vercel】OGP画像を動的生成してみたおはこんにちばんは。今回は Next.js で OGP画像 の動的生成をしてみました！ 自作したブログなどをどうせなら Twitter や SNS 等の SNS にシェアした際に、OGP 用画像を表示して視覚的にもアピールしたいですよね！分かります。私もそうでした。でも、どうやってページ毎に OGP画像 を生成すればいいのか分からんですよね。 そこで、今回は Next.js で Vercel にデプロイ時のOGP画像を動的に生成する方法を解説しようと思います。 サンプルコードはこちら。 実行環境Next.js 10.0.0React 17.0.1Canves 2.6.1 必要なライブラリをインストール今回は Next.js のサーバーサイド の処理で画像生成していくので、 node-canvas というライブラリを利用します。サーバサイドで Canvas が利用できるライブラリです。
