strtus/Vercel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Remove safe-photo-image-response checks in favor of centralized solution

Browse Source
This commit is contained in:
Sam Becker 2026-02-18 09:06:00 -06:00
parent 284e5fedfb
commit af672dfcf4
7 changed files with 44 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
app/home-image/route.tsx
View File

@ -7,7 +7,7 @@ import HomeImageResponse from '@/app/HomeImageResponse';
import { getIBMPlexMono } from '@/app/font';
import { getImageResponseCacheControlHeaders } from '@/image-response/cache';
import { APP_OG_IMAGE_QUERY_OPTIONS } from '@/feed';
import { safePhotoImageResponse } from '@/platforms/safe-photo-image-response';
import { ImageResponse } from 'next/og';
export const dynamic = 'force-static';
@ -28,15 +28,13 @@ export async function GET() {
const { width, height } = IMAGE_OG_DIMENSION_SMALL;
return safePhotoImageResponse(
photos,
isNextImageReady => (
<HomeImageResponse {...{
photos: isNextImageReady ? photos : [],
width,
height,
fontFamily,
}}/>
), { width, height, headers, fonts },
return new ImageResponse(
<HomeImageResponse {...{
photos,
width,
height,
fontFamily,
}}/>,
{ width, height, headers, fonts },
);
}

20
app/p/[photoId]/image/route.tsx
View File

@ -4,7 +4,7 @@ import PhotoImageResponse from '@/photo/PhotoImageResponse';
import { getIBMPlexMono } from '@/app/font';
import { getImageResponseCacheControlHeaders } from '@/image-response/cache';
import { staticallyGeneratePhotosIfConfigured } from '@/app/static';
import { safePhotoImageResponse } from '@/platforms/safe-photo-image-response';
import { ImageResponse } from 'next/og';
export const generateStaticParams = staticallyGeneratePhotosIfConfigured(
'image',
@ -30,17 +30,13 @@ export async function GET(
const { width, height } = IMAGE_OG_DIMENSION;
return safePhotoImageResponse(
[photo],
isNextImageReady => (
<PhotoImageResponse {...{
photo,
width,
height,
fontFamily,
isNextImageReady,
}} />
),
return new ImageResponse(
<PhotoImageResponse {...{
photo,
width,
height,
fontFamily,
}} />,
{ width, height, fonts, headers },
);
}

21
app/recents/image/route.tsx
View File

@ -9,7 +9,7 @@ import { getIBMPlexMono } from '@/app/font';
import { getImageResponseCacheControlHeaders } from '@/image-response/cache';
import { getAppText } from '@/i18n/state/server';
import { SHOW_RECENTS } from '@/app/config';
import { safePhotoImageResponse } from '@/platforms/safe-photo-image-response';
import { ImageResponse } from 'next/og';
export const dynamic = 'force-static';
@ -35,17 +35,14 @@ export async function GET() {
const { width, height } = IMAGE_OG_DIMENSION_SMALL;
return safePhotoImageResponse(
photos,
isNextImageReady => (
<RecentsImageResponse {...{
title,
photos: isNextImageReady ? photos : [],
width,
height,
fontFamily,
}}/>
),
return new ImageResponse(
<RecentsImageResponse {...{
title,
photos,
width,
height,
fontFamily,
}}/>,
{ width, height, fonts, headers },
);
}

26
app/template-image-tight/route.tsx
View File

@ -7,7 +7,7 @@ import TemplateImageResponse from
'@/app/TemplateImageResponse';
import { getIBMPlexMono } from '@/app/font';
import { getImageResponseCacheControlHeaders } from '@/image-response/cache';
import { safePhotoImageResponse } from '@/platforms/safe-photo-image-response';
import { ImageResponse } from 'next/og';
export async function GET() {
const [
@ -25,23 +25,15 @@ export async function GET() {
const { width, height } = IMAGE_OG_DIMENSION;
return safePhotoImageResponse(
photos,
isNextImageReady => (
<TemplateImageResponse {...{
photos: isNextImageReady ? photos : [],
includeHeader: false,
outerMargin: 0,
width,
height,
fontFamily,
}}/>
),
{
return new ImageResponse(
<TemplateImageResponse {...{
photos,
includeHeader: false,
outerMargin: 0,
width,
height,
fonts,
headers,
},
fontFamily,
}}/>,
{ width, height, fonts, headers },
);
}

19
app/template-image/route.tsx
View File

@ -7,7 +7,7 @@ import TemplateImageResponse from
'@/app/TemplateImageResponse';
import { getIBMPlexMono } from '@/app/font';
import { getImageResponseCacheControlHeaders } from '@/image-response/cache';
import { safePhotoImageResponse } from '@/platforms/safe-photo-image-response';
import { ImageResponse } from 'next/og';
export async function GET() {
const [
@ -25,16 +25,13 @@ export async function GET() {
const { width, height } = GRID_OG_DIMENSION;
return safePhotoImageResponse(
photos,
isNextImageReady => (
<TemplateImageResponse {...{
photos: isNextImageReady ? photos : [],
width,
height,
fontFamily,
}}/>
),
return new ImageResponse(
<TemplateImageResponse {...{
photos,
width,
height,
fontFamily,
}}/>,
{ width, height, fonts, headers },
);
}

4
src/photo/PhotoImageResponse.tsx
View File

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

36
src/platforms/safe-photo-image-response.ts
View File

@ -1,36 +0,0 @@
import { Photo } from '@/photo';
import { ImageResponse } from 'next/og';
import { JSX } from 'react';
import { IS_PREVIEW } from '@/app/config';
import { getOptimizedPhotoUrl } from '@/photo/storage';
const isNextImageReadyBasedOnPhotos = async (
photos: Photo[],
): Promise<boolean> =>
photos.length > 0 &&
fetch(getOptimizedPhotoUrl({
imageUrl: photos[0].url,
size: 640,
addBypassSecret: IS_PREVIEW,
}))
.then(response => response.ok)
.catch(() => false);
export const safePhotoImageResponse = async (
photos: Photo[],
jsx: (isNextImageReady: boolean) => JSX.Element,
options: ConstructorParameters<typeof ImageResponse>[1],
disableCheck = true,
) => {
// Make sure next/image can be reached from absolute urls,
// which may not exist on first pre-render
const isNextImageReady = (
disableCheck ||
await isNextImageReadyBasedOnPhotos(photos)
);
return new ImageResponse(
jsx(isNextImageReady),
options,
);
};