diff --git a/src/app/p/[photoId]/image/route.tsx b/src/app/p/[photoId]/image/route.tsx
index 2e87c567..ac9a761d 100644
--- a/src/app/p/[photoId]/image/route.tsx
+++ b/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(
- ,
+ ,
{ width, height, fonts, headers },
);
}
diff --git a/src/image-response/PhotoImageResponse.tsx b/src/image-response/PhotoImageResponse.tsx
index f633e513..2175add2 100644
--- a/src/image-response/PhotoImageResponse.tsx
+++ b/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 (