Check next/image before pre-rendering ogs

src/app/home-image/route.tsx

@@ -7,6 +7,7 @@ import HomeImageResponse from '@/image-response/HomeImageResponse';
 import { getIBMPlexMonoMedium } from '@/site/font';
 import { ImageResponse } from 'next/og';
 import { getImageResponseCacheControlHeaders } from '@/image-response/cache';
+import { isNextImageReadyBasedOnPhotos } from '@/photo';
 
 export async function GET() {
   const [
@@ -21,8 +22,17 @@ export async function GET() {
 
   const { width, height } = IMAGE_OG_DIMENSION_SMALL;
 
+  // Make sure next/image can be reached from absolute urls,
+  // which may not exist on first pre-render
+  const isNextImageReady = await isNextImageReadyBasedOnPhotos(photos);
+
   return new ImageResponse(
-    <HomeImageResponse {...{ photos, width, height, fontFamily }}/>,
+    <HomeImageResponse {...{
+      photos: isNextImageReady ? photos : [],
+      width,
+      height,
+      fontFamily,
+    }}/>,
     { width, height, headers, fonts },
   );
 }

src/app/template-image-tight/route.tsx

@@ -8,6 +8,7 @@ import TemplateImageResponse from
 import { getIBMPlexMonoMedium } from '@/site/font';
 import { ImageResponse } from 'next/og';
 import { getImageResponseCacheControlHeaders } from '@/image-response/cache';
+import { isNextImageReadyBasedOnPhotos } from '@/photo';
 
 export async function GET() {
   const [
@@ -25,10 +26,14 @@ export async function GET() {
 
   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(photos);
+
   return new ImageResponse(
     (
       <TemplateImageResponse {...{
-        photos,
+        photos: isNextImageReady ? photos : [],
         includeHeader: false,
         outerMargin: 0,
         width,

src/app/template-image/route.tsx

@@ -8,6 +8,7 @@ import TemplateImageResponse from
 import { getIBMPlexMonoMedium } from '@/site/font';
 import { ImageResponse } from 'next/og';
 import { getImageResponseCacheControlHeaders } from '@/image-response/cache';
+import { isNextImageReadyBasedOnPhotos } from '@/photo';
 
 export async function GET() {
   const [
@@ -21,11 +22,15 @@ export async function GET() {
   ]);
 
   const { width, height } = GRID_OG_DIMENSION;
+
+  // Make sure next/image can be reached from absolute urls,
+  // which may not exist on first pre-render
+  const isNextImageReady = await isNextImageReadyBasedOnPhotos(photos);
   
   return new ImageResponse(
     (
       <TemplateImageResponse {...{
-        photos,
+        photos: isNextImageReady ? photos : [],
         width,
         height,
         fontFamily,

src/image-response/components/ImagePhotoGrid.tsx

@@ -52,14 +52,8 @@ export default function ImagePhotoGrid({
       justifyContent: 'center',
       gap,
     }}>
-      {photos.slice(0, count).map(async ({ id, url }) => {
-        const src = getNextImageUrlForRequest(url, nextImageWidth);
-        // Make sure next/image can be reached from absolute url,
-        // which may not exist on first pre-render
-        const doesNextImageExist = await fetch(src)
-          .then(response => response.ok)
-          .catch(() => false);
-        return <div
+      {photos.slice(0, count).map(({ id, url }) =>
+        <div
           key={id}
           style={{
             display: 'flex',
@@ -68,27 +62,18 @@ export default function ImagePhotoGrid({
             overflow: 'hidden',
           }}
         >
-          {doesNextImageExist
-            ? <img {...{
-              src,
-              style: {
-                width: '100%',
-                ...imagePosition === 'center' && {
-                  height: '100%',
-                },
-                objectFit: 'cover',
-              },
-            }} />
-            : <div style={{
-              display: 'flex',
+          <img {...{
+            src: getNextImageUrlForRequest(url, nextImageWidth),
+            style: {
               width: '100%',
               ...imagePosition === 'center' && {
                 height: '100%',
               },
               objectFit: 'cover',
-            }} />}
-        </div>;
-      })}
+            },
+          }} />
+        </div>
+      )}
     </div>
   );
 }

src/photo/index.ts

@@ -1,3 +1,4 @@
+import { getNextImageUrlForRequest } from '@/services/next-image';
 import { FilmSimulation } from '@/simulation';
 import { HIGH_DENSITY_GRID, SHOW_EXIF_DATA } from '@/site/config';
 import { ABSOLUTE_PATH_FOR_HOME_IMAGE } from '@/site/paths';
@@ -264,3 +265,8 @@ export const getKeywordsForPhoto = (photo: Photo) =>
     .concat((photo.semanticDescription ?? '').split(' '))
     .filter(Boolean)
     .map(keyword => keyword.toLocaleLowerCase());
+
+export const isNextImageReadyBasedOnPhotos = async (photos: Photo[]) =>
+  photos.length > 0 && fetch(getNextImageUrlForRequest(photos[0].url, 640))
+    .then(response => response.ok)
+    .catch(() => false);