Use R2 for public image assets

next.config.ts

@@ -1,8 +1,40 @@
 import type { NextConfig } from "next";
 
+function getR2PublicUrl(): URL | null {
+  const publicUrl = process.env.NEXT_PUBLIC_R2_PUBLIC_URL?.trim();
+
+  if (!publicUrl) {
+    return null;
+  }
+
+  try {
+    const url = new URL(publicUrl);
+
+    if (url.protocol !== "https:" && url.protocol !== "http:") {
+      return null;
+    }
+
+    return url;
+  } catch {
+    return null;
+  }
+}
+
+const r2PublicUrl = getR2PublicUrl();
+
 const nextConfig: NextConfig = {
   images: {
-    remotePatterns: [],
+    remotePatterns: r2PublicUrl
+      ? [
+          {
+            protocol: r2PublicUrl.protocol.replace(":", "") as "http" | "https",
+            hostname: r2PublicUrl.hostname,
+            port: r2PublicUrl.port,
+            pathname: "/**",
+          },
+        ]
+      : [],
+    unoptimized: Boolean(r2PublicUrl),
   },
 };