add open-next custom image loader

Author: dario-piotrowicz

apps/site/cloudflare-image-loader.ts

@@ -0,0 +1,22 @@
+import type { ImageLoaderProps } from 'next/image';
+
+const normalizeSrc = (src: string) => {
+  return src.startsWith('/') ? src.slice(1) : src;
+};
+
+export default function cloudflareLoader({
+  src,
+  width,
+  quality,
+}: ImageLoaderProps) {
+  if (process.env.NODE_ENV === 'development') {
+    // Serve the original image when using `next dev`
+    return src;
+  }
+  const params = [`width=${width}`];
+  if (quality) {
+    params.push(`quality=${quality}`);
+  }
+  const paramsString = params.join(',');
+  return `/cdn-cgi/image/${paramsString}/${normalizeSrc(src)}`;
+}

apps/site/next.config.mjs

@@ -13,44 +13,61 @@ const nextConfig = {
   // is being built on a subdirectory (e.g. /nodejs-website)
   basePath: BASE_PATH,
   // Vercel/Next.js Image Optimization Settings
-  images: {
-    // We disable image optimisation during static export builds
-    unoptimized: ENABLE_STATIC_EXPORT,
-    // We add it to the remote pattern for the static images we use from multiple sources
-    // to be marked as safe sources (these come from Markdown files)
-    remotePatterns: [
-      {
-        protocol: 'https',
-        hostname: 'avatars.githubusercontent.com',
-        port: '',
-        pathname: '/**',
-      },
-      {
-        protocol: 'https',
-        hostname: 'bestpractices.coreinfrastructure.org',
-        port: '',
-        pathname: '/**',
-      },
-      {
-        protocol: 'https',
-        hostname: 'raw.githubusercontent.com',
-        port: '',
-        pathname: '/nodejs/**',
-      },
-      {
-        protocol: 'https',
-        hostname: 'user-images.githubusercontent.com',
-        port: '',
-        pathname: '/**',
-      },
-      {
-        protocol: 'https',
-        hostname: 'website-assets.oramasearch.com',
-        port: '',
-        pathname: '/**',
-      },
-    ],
-  },
+  images:
+    // If we're building for the Cloudflare deployment we want to use the custom cloudflare image loader
+    //
+    // Important: The custom loader ignores `remotePatterns` as those are configured as allowed source origins
+    //            (https://developers.cloudflare.com/images/transform-images/sources/)
+    //            in the Cloudflare dashboard itself instead (to the exact same values present in `remotePatterns` below).
+    //
+    // TODO: The `OPEN_NEXT_CLOUDFLARE` environment variable is being
+    //       defined in the worker building script, ideally the open-next
+    //       adapter should set it itself when it invokes the Next.js build
+    //       process, once it does that remove the manual `OPEN_NEXT_CLOUDFLARE`
+    //       definition in the package.json script.
+    process.env.OPEN_NEXT_CLOUDFLARE
+      ? {
+          loader: 'custom',
+          loaderFile: './cloudflare-image-loader.ts',
+        }
+      : {
+          // We disable image optimisation during static export builds
+          unoptimized: ENABLE_STATIC_EXPORT,
+          // We add it to the remote pattern for the static images we use from multiple sources
+          // to be marked as safe sources (these come from Markdown files)
+          remotePatterns: [
+            {
+              protocol: 'https',
+              hostname: 'avatars.githubusercontent.com',
+              port: '',
+              pathname: '/**',
+            },
+            {
+              protocol: 'https',
+              hostname: 'bestpractices.coreinfrastructure.org',
+              port: '',
+              pathname: '/**',
+            },
+            {
+              protocol: 'https',
+              hostname: 'raw.githubusercontent.com',
+              port: '',
+              pathname: '/nodejs/**',
+            },
+            {
+              protocol: 'https',
+              hostname: 'user-images.githubusercontent.com',
+              port: '',
+              pathname: '/**',
+            },
+            {
+              protocol: 'https',
+              hostname: 'website-assets.oramasearch.com',
+              port: '',
+              pathname: '/**',
+            },
+          ],
+        },
   serverExternalPackages: ['twoslash'],
   outputFileTracingIncludes: {
     // Twoslash needs TypeScript declarations to function, and, by default, Next.js
@@ -111,7 +128,7 @@ const nextConfig = {
   // TODO: The `OPEN_NEXT_CLOUDFLARE` environment variable is being
   //       defined in the worker building script, ideally the open-next
   //       adapter should set it itself when it invokes the Next.js build
-  //       process, onces it does that remove the manual `OPEN_NEXT_CLOUDFLARE`
+  //       process, once it does that remove the manual `OPEN_NEXT_CLOUDFLARE`
   //       definition in the package.json script.
   deploymentId: process.env.OPEN_NEXT_CLOUDFLARE
     ? (await import('@opennextjs/cloudflare')).getDeploymentId()