Use bypass secret for next/image server-side fetches

src/photo/index.ts

@@ -13,6 +13,7 @@ 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,7 +309,9 @@ export const getKeywordsForPhoto = (photo: Photo) =>
     .map(keyword => keyword.toLocaleLowerCase());
 
 export const isNextImageReadyBasedOnPhotos = async (photos: Photo[]) =>
-  photos.length > 0 && fetch(getNextImageUrlForRequest(photos[0].url, 640))
+  photos.length > 0 && fetchBypass(
+    getNextImageUrlForRequest(photos[0].url, 640)
+  )
     .then(response => response.ok)
     .catch(() => false);
 

src/photo/server.ts

@@ -12,6 +12,7 @@ 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;
@@ -128,7 +129,7 @@ const blurImage = async (image: ArrayBuffer) =>
   );
 
 export const resizeImageFromUrl = async (url: string) => 
-  fetch(decodeURIComponent(url))
+  fetchBypass(decodeURIComponent(url))
     .then(res => res.arrayBuffer())
     .then(buffer => resizeImage(buffer))
     .catch(e => {
@@ -137,7 +138,7 @@ export const resizeImageFromUrl = async (url: string) =>
     });
 
 export const blurImageFromUrl = async (url: string) => 
-  fetch(decodeURIComponent(url))
+  fetchBypass(decodeURIComponent(url))
     .then(res => res.arrayBuffer())
     .then(buffer => blurImage(buffer))
     .catch(e => {

src/site/config.ts

@@ -35,6 +35,10 @@ export const IS_PRODUCTION = process.env.NODE_ENV === 'production' && (
   !VERCEL_ENV
 );
 
+export const IS_PREVIEW = VERCEL_ENV === 'preview';
+
+export const VERCEL_BYPASS_SECRET = process.env.VERCEL_AUTOMATION_BYPASS_SECRET;
+
 // User-facing domain, potential site title
 const SITE_DOMAIN =
   process.env.NEXT_PUBLIC_SITE_DOMAIN ||

src/utility/vercel.ts

@@ -0,0 +1,12 @@
+import { IS_PREVIEW, VERCEL_BYPASS_SECRET } from "@/site/config";
+
+export const fetchBypass: typeof fetch = (url, options) =>
+  IS_PREVIEW && VERCEL_BYPASS_SECRET
+  ? fetch(url, {
+    ...options,
+    headers: {
+      ...options?.headers,
+      'x-vercel-protection-bypass': VERCEL_BYPASS_SECRET
+    },
+  })
+  : fetch(url, options);