Append bypass secret to internal OG image requests

src/image-response/components/ImagePhotoGrid.tsx

@@ -5,6 +5,7 @@ import {
   NextImageSize,
   getNextImageUrlForRequest,
 } from '@/services/next-image';
+import { IS_PREVIEW } from '@/site/config';
 
 export default function ImagePhotoGrid({
   photos,
@@ -64,7 +65,12 @@ export default function ImagePhotoGrid({
           }}
         >
           <img {...{
-            src: getNextImageUrlForRequest(url, nextImageWidth),
+            src: getNextImageUrlForRequest(
+              url, nextImageWidth,
+              undefined,
+              undefined,
+              IS_PREVIEW,
+            ),
             style: {
               width: '100%',
               ...imagePosition === 'center' && {

src/services/next-image.ts

@@ -1,4 +1,8 @@
-import { BASE_URL } from '@/site/config';
+import {
+  BASE_URL,
+  VERCEL_BYPASS_KEY,
+  VERCEL_BYPASS_SECRET,
+} from '@/site/config';
 
 // Explicity defined next.config.js `imageSizes`
 type NextCustomSize = 200;
@@ -14,6 +18,7 @@ export const getNextImageUrlForRequest = (
   size: NextImageSize,
   quality = 75,
   baseUrl = BASE_URL,
+  addBypassSecret = false,
 ) => {
   const url = new URL(`${baseUrl}/_next/image`);
 
@@ -21,6 +26,10 @@ export const getNextImageUrlForRequest = (
   url.searchParams.append('w', size.toString());
   url.searchParams.append('q', quality.toString());
 
+  if (addBypassSecret && VERCEL_BYPASS_SECRET) {
+    url.searchParams.append(VERCEL_BYPASS_KEY, VERCEL_BYPASS_SECRET);
+  }
+
   return url.toString();
 };
 

src/site/config.ts

@@ -37,6 +37,7 @@ export const IS_PRODUCTION = process.env.NODE_ENV === 'production' && (
 
 export const IS_PREVIEW = VERCEL_ENV === 'preview';
 
+export const VERCEL_BYPASS_KEY = 'x-vercel-protection-bypass';
 export const VERCEL_BYPASS_SECRET = process.env.VERCEL_AUTOMATION_BYPASS_SECRET;
 
 // User-facing domain, potential site title

src/utility/useOnVisible.ts

@@ -1,7 +1,7 @@
 import { useEffect } from 'react';
 
 export default function useOnVisible(
-  ref: React.RefObject<HTMLElement>,
+  ref: React.RefObject<HTMLElement | null>,
   onVisible?: () => void
 ) {
   useEffect(() => {

src/utility/vercel.ts

@@ -1,12 +1,16 @@
-import { IS_PREVIEW, VERCEL_BYPASS_SECRET } from "@/site/config";
+import {
+  IS_PREVIEW,
+  VERCEL_BYPASS_KEY,
+  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);
+    ? fetch(url, {
+      ...options,
+      headers: {
+        ...options?.headers,
+        [VERCEL_BYPASS_KEY]: VERCEL_BYPASS_SECRET,
+      },
+    })
+    : fetch(url, options);