こんにちは、Yuiです。引き続き週イチ発信をしていきます。今週は初めてNext.jsで動的OGPに挑戦したので、そのことについて書きます。何もスタイルを当ててないので、ものすごくシンプルなもの…
https://qiita.com/yuikoito/items/619120c592d99f9d3053#ogp%E7%94%A8%E3%81%AE%E7%94%BB%E5%83%8F%E3%82%92%E4%BD%9C%E6%88%90%E3%81%99%E3%82%8B
codeが凄いシンプルでカスタマイズしやすい
まずは開発するためにCONTRIBUTING.mdを参照
Clone this repo with git clone <https://github.com/vercel/og-image>
Change directory with cd og-imageRun 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は今回はローカルインストールにしようと思います。
1
2
3
yarn install
yarn install --dev vercel
yarn vercel devyarn install --dev vercel このタイミングで、vercelにcliログインするよう案内されるのでそのとおりに。
1
2
3
4
5
6
7
8
9
$ 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にアクセス
画像生成用urlを扱うだけじゃなくて、そのurlを作るための画面も用意されてる、便利ですね。
カスタマイズ
ここからカスタマイズしていきます。
おおよそ揃ってるのであまりすることもないのですが、下記対応を行います。
背景に画像を入れれるようにする
日本語入力ができるようにする