🕌

Next.js(App Router)でプレースホルダー画像を自作する

西畑一馬

2024/06/12に公開

Next.js

tech

サイト開発の初期で課題になることの一つに開発途中でダミー画像をどうするかという問題があります。

多くのプロジェクトではAPI連携などが完了して正式な画像で開発できるようになるのは開発終盤になることもあり、それまでつなぎのダミー画像をどう見せるかは悩みどころです。

デザインカンプなどから書き出して静的に配置しても良いのですが、手間がかかる上にダミー画像が削除されず本番データとして残り続けることがよくあります。

https://placehold.jp/ といったプレースホルダー画像用のサービスもありますが、開発途中のサイトで外部サービスを利用することのセキュリティ的な懸念もあります。

https://placehold.jp/

Next.js(App Router)にはImageResponseという画像生成が手軽にできる機能がありますのでプレースホルダー画像を自作してしまえば、前述の問題や懸念を取り払うことができるようになります。

プレースホルダー画像を出力するAPIを作成

app/placeholder-image/route.tsxというファイルを作成して以下のように記述します。

今回はGETパラメーターでwidthとheight、background、colorを変更できるようにしています。

app/placeholder-image/route.tsx

import { ImageResponse } from 'next/og'
import { type NextRequest } from 'next/server'

export const contentType = 'image/png'

export async function GET(request: NextRequest) {
  const searchParams = request.nextUrl.searchParams
  const width = Number(searchParams.get('width')) || 1200
  const height = Number(searchParams.get('height')) || 630

  const background = searchParams.get('background') || 'white'
  const color = searchParams.get('color') || 'black'

  return new ImageResponse(
    <div
      style={{
        fontSize: 40,
        background,
        color,
        width: '100%',
        height: '100%',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        textAlign: 'center'
      }}
    >
      {width} x {height}
    </div>
    , {
      width,
      height,
    }
  )
}

これで完成です。

プレースホルダーを表示してみる

page.tsxで以下のように記述していましょう。

<Image src="/placeholder-image?width=400&height=300" alt="" width="400" height="300" />

次のような画像が表示されます。

400x300と記述された白い画像

サイズだけではなく色も変えてみましょう。

<Image src="/placeholder-image?width=100&height=300&background=rgb(41, 122, 137)&color=white" alt="" width="100" height="300" />

次のような画像が表示されます。

１00x300と記述された緑の画像

このようにNext.jsを利用すれば可変するプレースホルダー画像も自作できますので試してみてください。

株式会社トゥーアールPublication

トゥーアールはフロントエンドに特化したWeb制作会社です。 ReactやNext.jsなどのJavaScriptフレームワークを利用したフロントエンド開発についてお気軽にご相談ください。

プレースホルダー画像を出力するAPIを作成

プレースホルダーを表示してみる

Discussion