アセットにデジタルカメラで撮影した写真をアップロードし、フロントエンドではnext/imageコンポーネントを利用して表示領域や端末に応じて最適化された画像を表示したい、というシナリオについて検討しました。
MTMLでビューを記述する際にはMTAssetThumbnailURLを利用してリサイズした画像を表示する指定をし、再構築によってリサイズした画像が生成されます。しかし、next.jsでフロントエンド実装を行うとそもそもリサイズした画像が存在しません。
そこで、next/imageコンポーネントのドキュメントで紹介されているloaderのコードで画像がリクエストされた際、リサイズした画像がなければ画像を生成して返す、リサイズした画像があればその画像を返すPHPを開発しました。このPHPは、画像のリクエストヘッダにあるAcceptを確認し、「image/webp」が含まれる場合にはWebP形式でリサイズした画像を生成して返す機能も持たせました。
利用の際には.htaccess（もしくはnginxの設定）を併用し、画像のリクエスト時にクエリストリング（画像サイズやクオリティ設定）が付いている場合はPHPで処理するようにしています。また、Amazon CloudFrontを利用することで高速に配信できると考えています。
今後の検討課題として画像を更新・削除した際にリサイズした画像を削除すること、夜間に生成したリサイズ画像を最適化すること、等が上がっています。