2020-10-11に更新

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を使う

ツイッターでシェア
みんなに共有、忘れないようにメモ

だら@Crieit開発者

Crieitの開発者です。 Webエンジニアです(在宅)。大体10年ちょい。 記事でわかりにくいところがあればDMで質問していただくか、案件発注してください。 業務依頼、同業種の方からのコンタクトなどお気軽にご連絡ください。 業務経験有:PHP, MySQL, Laravel, Vue.js, React, Node, RoR 趣味:Elixir, Phoenix, Nuxt, Express, GCP, AWS等色々 PHPフレームワークちいたんの作者

Crieitは誰でも投稿できるサービスです。 是非記事の投稿をお願いします。どんな軽い内容でも投稿できます。

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

有料記事を販売できるようになりました!

こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください。
ボードとは?

コメント