Standardize on query params for next/image bypass

src/app/admin/photos/[photoId]/edit/page.tsx

@@ -2,7 +2,11 @@ import { redirect } from 'next/navigation';
 import { getPhotoNoStore, getUniqueTagsCached } from '@/photo/cache';
 import { PATH_ADMIN } from '@/site/paths';
 import PhotoEditPageClient from '@/photo/PhotoEditPageClient';
-import { AI_TEXT_GENERATION_ENABLED, BLUR_ENABLED } from '@/site/config';
+import {
+  AI_TEXT_GENERATION_ENABLED,
+  BLUR_ENABLED,
+  IS_PREVIEW,
+} from '@/site/config';
 import { blurImageFromUrl, resizeImageFromUrl } from '@/photo/server';
 import { getNextImageUrlForManipulation } from '@/services/next-image';
 
@@ -21,12 +25,14 @@ export default async function PhotoEditPage({
   
   // Only generate image thumbnails when AI generation is enabled
   const imageThumbnailBase64 = AI_TEXT_GENERATION_ENABLED
-    ? await resizeImageFromUrl(getNextImageUrlForManipulation(photo.url))
+    ? await resizeImageFromUrl(
+      getNextImageUrlForManipulation(photo.url, IS_PREVIEW)
+    )
     : '';
 
   const blurData = BLUR_ENABLED
     ? await blurImageFromUrl(
-      getNextImageUrlForManipulation(photo.url)
+      getNextImageUrlForManipulation(photo.url, IS_PREVIEW)
     )
     : '';
 

src/photo/form/PhotoForm.tsx

@@ -27,7 +27,7 @@ import usePreventNavigation from '@/utility/usePreventNavigation';
 import { useAppState } from '@/state/AppState';
 import UpdateBlurDataButton from '../UpdateBlurDataButton';
 import { getNextImageUrlForManipulation } from '@/services/next-image';
-import { BLUR_ENABLED } from '@/site/config';
+import { BLUR_ENABLED, IS_PREVIEW } from '@/site/config';
 import { PhotoDbInsert } from '..';
 import ErrorNote from '@/components/ErrorNote';
 
@@ -204,7 +204,7 @@ export default function PhotoForm({
       case 'blurData':
         return shouldDebugImageFallbacks && type === 'edit' && formData.url
           ? <UpdateBlurDataButton
-            photoUrl={getNextImageUrlForManipulation(formData.url)}
+            photoUrl={getNextImageUrlForManipulation(formData.url, IS_PREVIEW)}
             onUpdatedBlurData={blurData =>
               setFormData(data => ({ ...data, blurData }))}
           />

src/photo/index.ts

@@ -3,7 +3,7 @@ import { formatFocalLength } from '@/focal';
 import { Lens } from '@/lens';
 import { getNextImageUrlForRequest } from '@/services/next-image';
 import { FilmSimulation } from '@/simulation';
-import { HIGH_DENSITY_GRID, SHOW_EXIF_DATA } from '@/site/config';
+import { HIGH_DENSITY_GRID, IS_PREVIEW, SHOW_EXIF_DATA } from '@/site/config';
 import { ABSOLUTE_PATH_FOR_HOME_IMAGE } from '@/site/paths';
 import { formatDate, formatDateFromPostgresString } from '@/utility/date';
 import {
@@ -13,7 +13,6 @@ import {
   formatExposureTime,
 } from '@/utility/exif';
 import { parameterize } from '@/utility/string';
-import { fetchBypass } from '@/utility/vercel';
 import camelcaseKeys from 'camelcase-keys';
 import { isBefore } from 'date-fns';
 import type { Metadata } from 'next';
@@ -308,10 +307,16 @@ export const getKeywordsForPhoto = (photo: Photo) =>
     .filter(Boolean)
     .map(keyword => keyword.toLocaleLowerCase());
 
-export const isNextImageReadyBasedOnPhotos = async (photos: Photo[]) =>
-  photos.length > 0 && fetchBypass(
-    getNextImageUrlForRequest(photos[0].url, 640)
-  )
+export const isNextImageReadyBasedOnPhotos = async (
+  photos: Photo[],
+): Promise<boolean> =>
+  photos.length > 0 && fetch(getNextImageUrlForRequest(
+    photos[0].url,
+    640,
+    undefined,
+    undefined,
+    IS_PREVIEW,
+  ))
     .then(response => response.ok)
     .catch(() => false);
 

src/photo/server.ts

@@ -12,7 +12,6 @@ import { PhotoFormData } from './form';
 import { FilmSimulation } from '@/simulation';
 import sharp, { Sharp } from 'sharp';
 import { GEO_PRIVACY_ENABLED, PRO_MODE_ENABLED } from '@/site/config';
-import { fetchBypass } from '@/utility/vercel';
 
 const IMAGE_WIDTH_RESIZE = 200;
 const IMAGE_WIDTH_BLUR = 200;
@@ -129,7 +128,7 @@ const blurImage = async (image: ArrayBuffer) =>
   );
 
 export const resizeImageFromUrl = async (url: string) => 
-  fetchBypass(decodeURIComponent(url))
+  fetch(decodeURIComponent(url))
     .then(res => res.arrayBuffer())
     .then(buffer => resizeImage(buffer))
     .catch(e => {
@@ -138,7 +137,7 @@ export const resizeImageFromUrl = async (url: string) =>
     });
 
 export const blurImageFromUrl = async (url: string) => 
-  fetchBypass(decodeURIComponent(url))
+  fetch(decodeURIComponent(url))
     .then(res => res.arrayBuffer())
     .then(buffer => blurImage(buffer))
     .catch(e => {

src/services/next-image.ts

@@ -35,5 +35,8 @@ export const getNextImageUrlForRequest = (
 
 // Generate small, low-bandwidth images for quick manipulations such as
 // generating blur data or image thumbnails for AI text generation
-export const getNextImageUrlForManipulation = (imageUrl: string) =>
-  getNextImageUrlForRequest(imageUrl, 640, 90);
+export const getNextImageUrlForManipulation = (
+  imageUrl: string,
+  addBypassSecret = false,
+) =>
+  getNextImageUrlForRequest(imageUrl, 640, 90, undefined, addBypassSecret);

src/utility/vercel.ts

@@ -4,7 +4,7 @@ import {
   VERCEL_BYPASS_SECRET,
 } from '@/site/config';
 
-export const fetchBypass: typeof fetch = (url, options) =>
+export const fetchWithBypass: typeof fetch = (url, options) =>
   IS_PREVIEW && VERCEL_BYPASS_SECRET
     ? fetch(url, {
       ...options,