cubdesign LogocubdesignDEV
🧑‍🏫

Next.js og-image[open]

更新:
  • Next.js

✍️ この記事は、まだ編集中です。

TODO

  • 出来上がった og-image の説明。
  • 出来上がった dot-dom について

Next.js の Blog のチュートリアルを見ていると、OG 画像をサーバーで自動生成している部分を見つけた。なんろうって調べてみると、Vercel がプログラムを公開していた。そのままだと日本語が使えなかったので日本語が使えるように修正してみた。

↓ この部分 https://nextjs.org/learn/basics/assets-metadata-css/polishing-layout

<meta
  property="og:image"
  content={`https://og-image.vercel.app/${encodeURI(
    siteTitle
  )}.png?theme=light&md=0&fontSize=75px&images=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fnextjs-black-logo.svg`}
/>

リポジトリ

このリポジトリを Fork して、して、Vercel にデプロイするだけで使える。 https://github.com/vercel/og-image

開発

インストール

$ yarn

開発環境スタート

$ vercel dev

↓ 実行エラーがでた。

error @: The engine "node" is incompatible with this module. Expected version "14.x". Got "16.14.2"

node のバージョンを合わせる

この PC は node マネージャーに VOLTA を使っていので、volta pin で node バージョンを 14.x に固定する。

$ volta pin node@14

こんな感じで package.json に node バージョンが追記される。 この Workspace に移動すると自動で node バージョンが切り替わる。便利。

"volta": {
  "node": "14.19.2"
}

エラー変わらず!

error @: The engine "node" is incompatible with this module. Expected version "14.x". Got "16.14.2"

🔴  エラーの検証 その 1

vercel の実行は vercel を global インストールしたので、インストール時の node バージョンで実行されたのでは?(おそらく)

volta で global の node を 14.x に変更した。

エラー変わらず!

🟢 エラーの検証 その 2

原因がわかった。最初インストールした際、npm i -g vercel で、npm で global にインストールしていた。一度、 npm uninstall -g vercel でインインストールして、yarn global add vercel して、yarn で global にインストールしたら、エラーが無くなった。

ハマった。

成功!

日本語フォント

ダウンロード

ゴシック体の、Weight は、レギュラーのみをダウンロード。 ボールド、code 用等幅フォントは使用せず、レギュラーで代用する。

Noto Sans JP https://google-webfonts-helper.herokuapp.com/fonts/noto-sans-jp?subsets=japanese,latin

フォントを使う

ダウンロードした .woff2 を使用する。

デプロイ

Vercel へのデプロイの注意点

Vercel の Free プランの場合は、そのままだとデプロイできないので vercel.json の rewrites のみを残してあとは削除する。

{
  "$schema": "https://openapi.vercel.sh/vercel.json",
  "regions": ["all"],
  "functions": {
    "api/**": {
      "memory": 3008
    }
  },
  "rewrites": [{ "source": "/(.+)", "destination": "/api" }]
}

↓

{
  "rewrites": [{ "source": "/(.+)", "destination": "/api" }]
}

参考サイト

バージョン

og-image

"node": "14.19.2"

frontend

"next": "12.1.5",