<h2>Before</h2>
<ul>
<li>OGP生成用のAPIを別に用意</li>
<li>HTMLでレイアウトを組んでpuppeteer でスクショをとってpngイメージ化していた</li>
</ul>
<h2>Problem</h2>
<ul>
<li>OGPの生成が遅くタイムアウトしてしまう</li>
<li>puppeteerが入った Docker を用意するのが面倒</li>
<li>DockerベースとはいえAPIをVercel外で管理することになる（つまりお金かかる）</li>
</ul>
<h2>After</h2>
<ul>
<li>@napi-rs/canvas で canvas にテキストを描画するようにした
<ul>
<li><a href="https://www.npmjs.com/package/@napi-rs/canvas">https://www.npmjs.com/package/@napi-rs/canvas</a> は node-canvas の alternative</li>
<li>使用感は node-canvas と同じ</li>
</ul>
</li>
</ul>
<h2>Tips</h2>
<ul>
<li>レイアウトはpngで準備して、canvasに合成、その上に ctx.fillText で描画</li>
<li>テキスト折返しは自動で行われないので ctx.measureText を使って自前で計算して力技で描画</li>
<li>背景画像やフォントファイルなどのリソースファイルを参照するときに、Output File Tracing + path.resolve しないと、Vercelで動かしたときにうまく読み込みができなかった
<ul>
<li><a href="https://nextjs.org/docs/advanced-features/output-file-tracing">https://nextjs.org/docs/advanced-features/output-file-tracing</a></li>
</ul>
</li>
</ul>


## Before

 - OGP生成用のAPIを別に用意
 - HTMLでレイアウトを組んでpuppeteer でスクショをとってpngイメージ化していた

## Problem

 - OGPの生成が遅くタイムアウトしてしまう
 - puppeteerが入った Docker を用意するのが面倒
 - DockerベースとはいえAPIをVercel外で管理することになる（つまりお金かかる）

## After

 - @napi-rs/canvas で canvas にテキストを描画するようにした
     - https://www.npmjs.com/package/@napi-rs/canvas は node-canvas の alternative
     - 使用感は node-canvas と同じ

## Tips

 - レイアウトはpngで準備して、canvasに合成、その上に ctx.fillText で描画
 - テキスト折返しは自動で行われないので ctx.measureText を使って自前で計算して力技で描画
 - 背景画像やフォントファイルなどのリソースファイルを参照するときに、Output File Tracing + path.resolve しないと、Vercelで動かしたときにうまく読み込みができなかった
     - https://nextjs.org/docs/advanced-features/output-file-tracing


OGPの生成をcanvasベースに書き換えた

Before

Problem

After

Tips