nextjsで動的にog-imageを作成する方法
投稿日:2023/10/4
環境設定
1nextjs: v13.5.4
2reactなどは最新版ディレクトリ構造
1/
2├app
3│ ├ [id]
4│ │ ├ page.tsx
5│ │ └ opengraph-image.tsx
6│ └ page.tsx
7└ next.config.jsそれぞれのファイルの解説
app/page.tsx
1export default function Page() {
2 return <div>test page</div>;
3}これはエラー防止のためにあります。(特に内容はありません)
app/[id]/page.tsx
1export default function Page({ params }: { params: { id: string } }) {
2 return <div>id:{params.id}</div>;
3}ここでは例えば /1 にアクセスした際にはid:1と表示されます。これはnextjsのダイナミックルーティングというシステムを利用しています。
app/[id]/opengraph-image.tsx
これが今回の鍵を握るファイルです。
1import { ImageResponse } from 'next/server'
2
3export const size = {
4 width: 1200,
5 height: 630,
6}
7
8export const contentType = 'image/png'
9export default function Image({params}:{params:{id:string}}){
10 return new ImageResponse(
11 (
12 <div
13 style={{
14 fontSize: 128,
15 background: 'white',
16 width: '100%',
17 height: '100%',
18 display: 'flex',
19 alignItems: 'center',
20 justifyContent: 'center',
21 }}
22 >
23 id:{params.id}
24 </div>
25 )
26}ここではテストのためidをそのまま出しています。これで 1/opengraph-image にアクセスすると下のような画像が表示されます。
SSGでの使い方
SSGで使用する際にはファイルを以下のように変更します。
next.config.js
1/** @type {import('next').NextConfig} */
2const nextConfig = {
3 output: "export",
4};
5
6module.exports = nextConfig;app/[id]/page.tsx
1//以下を追加
2export function generateStaticParams() {
3 return [{ id: "1" }, { id: "2" }];
4}ここではIDに1と2が来るという前提で書いています。
app/[id]/opengraph-image.tsx
SSG対応をしようとすると以下のようなエラーを吐きます
これを対処するために以下のようにgenerateStaticParamsを追加します。
1export function generateStaticParams() {
2 return [{ id: "1" }, { id: "2" }];
3}これをやっても上のエラーは消えません。
原因はnext.js側にあるようです。そのため、対処法は今のことろありません。そのため最新版(v13.5.4)ではSSGに対応できないので諦めてこのファイルを削除する必要があります。
12023-10-12追記
2現在の最新バージョン v13.5.5でも同様の事例が発生するようです。早く直してほしい最後に
このようにすることでnext.jsで動的にopengraph-imageを作成できます。ただし、まだSSGでは利用できません。(これは私が報告し、公式も認めました。)ご注意ください。(私はわけがわからないエラーで1時間以上溶かしました。)