fix(web): allow external images in Next.js Image component

apps/web/next-env.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-/// <reference path="./.next-dev/types/routes.d.ts" />
+/// <reference path="./.next/types/routes.d.ts" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

apps/web/next.config.ts

@@ -5,21 +5,24 @@ import { resolve } from 'node:path';
 // up. Deliberately not import.meta.url: this package is CommonJS.
 const repoRoot = resolve(process.cwd(), '..', '..');
 
+const remotePatterns: any[] = [];
+if (process.env.NEXT_PUBLIC_S3_ORIGIN) {
+  try {
+    const url = new URL(process.env.NEXT_PUBLIC_S3_ORIGIN);
+    remotePatterns.push({ protocol: url.protocol.replace(':', ''), hostname: url.hostname, port: url.port || '' });
+  } catch {}
+}
+
 const config: NextConfig = {
-  // `next dev` and `next build` must not write into the same directory. Running
-  // them concurrently otherwise leaves the dev runtime pointing at production
-  // chunks that have already been replaced (MODULE_NOT_FOUND for numbered or
-  // vendor chunks).
   distDir: process.env.NEXT_DIST_DIR ?? '.next',
-
-  // Copies only the files actually imported next to a server.js instead of
-  // shipping all of node_modules: ~1GB production image down to a few hundred MB.
   output: 'standalone',
-
-  // npm workspaces hoists most dependencies to the repo-root node_modules, not
-  // apps/web/node_modules. Without this, tracing starts at apps/web, misses the
-  // hoisted packages, and the container dies at runtime with MODULE_NOT_FOUND.
   outputFileTracingRoot: repoRoot,
+  images: {
+    remotePatterns: remotePatterns.length > 0 ? remotePatterns : [
+      { protocol: 'http', hostname: 'localhost' },
+      { protocol: 'https', hostname: 'lh3.googleusercontent.com' } // Google Auth avatars
+    ],
+  },
 };
 
 export default config;