VercelにてNext.jsのAPI RoutesでOGPを作成する 2020年版

VercelにてNext.jsのAPI Routesでファイルが読み込めるようになっていました！　元々、API Routesでは別のファイルの読み込みができませんでした。そのため下記の記事のように別途node builderを利用していましたが、もうそれも必要なくなり、開発もデプロイもシンプルなAPI Routesとして実行できるようになっているようで、非常に簡単になりました。

Vercel（元ZeitのNow）にてNext.jsでnode-canvasを使ってOGP

どういうことか

このissueで話が進んでおり、このコメントが解決方法になっています。

Next.js API routes (and pages) should support reading files · Issue #8251 · vercel/next.js

つまり、

path.resolve('./public/ts-data.csv')

というパス指定でファイルが読み込めるようになっています！　めでたい。

具体例

具体的にはこういうコードでVercelでも正常に動作しました。フォントを読み込んでのテキスト描画も、画像の描画も、正常にできています。

import { NextApiRequest, NextApiResponse } from 'next'
import * as path from 'path'
const { createCanvas, registerFont, loadImage } = require('canvas')

export default async (req: NextApiRequest, res: NextApiResponse) => {
  registerFont(path.resolve('./fonts/ipagp.ttf'), {
    family: 'ipagp',
  })

  const width = 600
  const height = 315
  const canvas = createCanvas(width, height)
  const context = canvas.getContext('2d')

  context.fillStyle = '#fafafa'
  context.fillRect(0, 0, width, height)

  context.font = '15px ipagp'
  context.fillStyle = '#424242'
  context.textAlign = 'center'
  context.textBaseline = 'middle'
  context.fillText('あいうえお', 100, 50)

  const test = await loadImage(path.resolve('./images/test.png'))
  context.drawImage(test, 300, 0, 70, 70)

  const buffer = canvas.toBuffer()

  res.writeHead(200, {
    'Cache-Control': 'public, max-age=315360000, s_maxage=315360000',
    Expires: new Date(Date.now() + 315360000000).toUTCString(),
    'Content-Type': 'image/png',
    'Content-Length': buffer.length,
  })
  res.end(buffer, 'binary')
}

下記がVercel上で描画した画像です。

ちなみにnode-canvasでのOGPの作成はハマるのでそれは別途下記参照です。

Vercel（元ZeitのNow）にてNext.jsのAPI Routesでnode-canvasを使う