Next.jsの本番環境でアップロードされた画像を動的に表示する方法

// app/[lang]/api/media-stream/icon/route.ts

import type { NextRequest } from 'next/server';
import { NextResponse } from "next/server";
import { createReadStream } from 'fs'; // 読み取り用ストリーミングモジュール
import { PrismaClient } from '@prisma/client';

const APP_PATH = process.env.APP_ROOT_PATH;
const MEDIA_ROOT_PATH = `${ APP_PATH }/public`;

const prisma = new PrismaClient();

async function MediaStreamIcon( request: NextRequest ) {

  const responseHeader = new Headers( request.headers );
  const requestUrl = new URL( request.url ).searchParams;
  const id = requestUrl.get('id');

  if ( id && id.match( /^[0-9]+$/g ) ) {
    const category = await prisma.category.findFirst({
      where: { id: Number( id ) }
    });

    if ( category && category.icon && category.icon_mime ) {
    　 // レスポンスヘッダーに画像用のマイムタイプを設定
      responseHeader.set( 'Content-Type', category.icon_mime );
      // 読み込み用ストリームに画像パスを指定
      const stream = createReadStream( MEDIA_ROOT_PATH + category.icon );
	　// Node.js組み込みのResponseクラスに、設定したresponseHeaderとstreamを設定しクライアントに送信
      return new Response( stream as any, { headers: responseHeader });
    }
  }

  return NextResponse.json({ message: 'メディアの取得に失敗しました。' }, { status: 401 });
}

export { MediaStreamIcon as GET }

<img src="https://ryusei.io/api/media-stream/icon?id=[icon_id]" alt="アイコン" loading="lazy" /?

import Image from 'next/image';

export default function ImageComponent() {
	return <Image src="/api/media-stream/icon?id=[icon_id]" alt="アイコン" loading="lazy" width="300" height="250" />
}

const nextConfig = {
	 // .....
	images: {
    domains: [ process.env.APP_URL ],
    },
	// .....
}