Coffee Break Point

notion API + NEXT.js + netlify でブログ立ち上げ ⑦ 動的OGP

個人開発・自動化プロジェクト
notion API + NEXT.js + netlify でブログ立ち上げ ⑦ 動的OGP
【動的OGP】Next.js + TypeScript + Vercelデプロイで動的OGPを実現する - Qiita
こんにちは、Yuiです。 引き続き週イチ発信をしていきます。 今週は初めてNext.jsで動的OGPに挑戦したので、そのことについて書きます。 何もスタイルを当ててないので、ものすごくシンプルなものですが、入力した文字をそのままOGPにするというものです。 過去の週イチ発...
qiita.com
Thumbnail

Unsupported block type: link_preview

codeが凄いシンプルでカスタマイズしやすい

まずは開発するためにCONTRIBUTING.mdを参照

Clone this repo with git clone <https://github.com/vercel/og-image>
Change directory with cd og-image
Run yarn or npm install to install all dependencies
Run locally with vercel dev and visit localhost:3000 (if nothing happens, run npm install -g vercel)
If necessary, edit the exePath in options.ts to point to your local Chrome executable

シンプルですね。
この通りに実行してみます。
vercelは今回はローカルインストールにしようと思います。

yarn install
yarn install --dev vercel
yarn vercel dev

yarn install --dev vercel このタイミングで、vercelにcliログインするよう案内されるのでそのとおりに。

$ yarn vercel dev
yarn run v1.22.15
Vercel CLI 24.0.0
> Creating initial build
Running "yarn run build"
warning ../../../../package.json: No license field
$ tsc -p api/tsconfig.json && tsc -p web/tsconfig.json
> Success! Build completed
> Ready! Available at http://localhost:3000


http://localhost:3000にアクセス

Image


画像生成用urlを扱うだけじゃなくて、そのurlを作るための画面も用意されてる、便利ですね。

カスタマイズ

ここからカスタマイズしていきます。
おおよそ揃ってるのであまりすることもないのですが、下記対応を行います。

  1. 背景に画像を入れれるようにする
  2. 日本語入力ができるようにする