Make og image access resilient on first deploy

src/app/p/[photoId]/image/route.tsx

@@ -6,6 +6,7 @@ import { ImageResponse } from 'next/og';
 import { getImageResponseCacheControlHeaders } from '@/image-response/cache';
 import { STATICALLY_OPTIMIZED } from '@/site/config';
 import { GENERATE_STATIC_PARAMS_LIMIT, getPhotoIds } from '@/photo/db';
+import { isNextImageReadyBasedOnPhotos } from '@/photo';
 
 export let generateStaticParams:
   (() => Promise<{ photoId: string }[]>) | undefined = undefined;
@@ -34,9 +35,19 @@ export async function GET(
   if (!photo) { return new Response('Photo not found', { status: 404 }); }
 
   const { width, height } = IMAGE_OG_DIMENSION;
+
+  // Make sure next/image can be reached from absolute urls,
+  // which may not exist on first pre-render
+  const isNextImageReady = await isNextImageReadyBasedOnPhotos([photo]);
   
   return new ImageResponse(
-    <PhotoImageResponse {...{ photo, width, height, fontFamily }} />,
+    <PhotoImageResponse {...{
+      photo,
+      width,
+      height,
+      fontFamily,
+      isNextImageReady,
+    }} />,
     { width, height, fonts, headers },
   );
 }

src/image-response/PhotoImageResponse.tsx

@@ -12,11 +12,13 @@ export default function PhotoImageResponse({
   width,
   height,
   fontFamily,
+  isNextImageReady = true,
 }: {
   photo: Photo
   width: NextImageSize
   height: number
   fontFamily: string
+  isNextImageReady: boolean
 }) {
   const model = photo.model
     ? formatCameraModelTextShort(cameraFromPhoto(photo))
@@ -25,7 +27,7 @@ export default function PhotoImageResponse({
   return (
     <ImageContainer {...{ width, height }}>
       <ImagePhotoGrid {...{
-        photos: [photo],
+        photos: isNextImageReady ? [photo] : [],
         width,
         height,
         ...OG_TEXT_BOTTOM_ALIGNMENT && { imagePosition: 'top' },