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

2022年3月29日

【動的OGP】Next.js + TypeScript + Vercelデプロイで動的OGPを実現する - Qiita

こんにちは、Yuiです。引き続き週イチ発信をしていきます。今週は初めてNext.jsで動的OGPに挑戦したので、そのことについて書きます。何もスタイルを当ててないので、ものすごくシンプルなものですが、入力した文字をそのままOGPにするというものです。過去の週イチ発...

Qiita

GitHub - vercel/og-image: Open Graph Image as a Service - generate cards for Twitter, Facebook, Slack, etc

Open Graph Image as a Service - generate cards for Twitter, Facebook, Slack, etc - vercel/og-image

GitHub

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