fix: unoptimize images if we have base prefix

Author: AdityaKhatri

.github/workflows/cd.yml

@@ -62,7 +62,7 @@ jobs:
           NEXT_PUBLIC_POSTHOG_HOST_API: ${{ vars.NEXT_PUBLIC_POSTHOG_HOST_API }}
           # Build Date
           MAPSWIPE_BUILD_DATE: ${{ env.MAPSWIPE_API_LAST_MODIFIED_EPOCH }}
-          BASE_PREFIX: ${{ vars.BASE_PREFIX }}
+          NEXT_PUBLIC_BASE_PREFIX: ${{ vars.BASE_PREFIX }}
 
       - name: Upload GH artifacts
         uses: actions/upload-pages-artifact@v3

next.config.js

@@ -1,18 +1,30 @@
 const withExportImages = require('next-export-optimize-images');
 
-const basePrefix = process.env.BASE_PREFIX;
+const basePrefix = process.env.NEXT_PUBLIC_BASE_PREFIX;
 const isBasePrefixAvailable = basePrefix !== undefined && basePrefix.trim().length > 0;
 
-const nextConfig = withExportImages({
+let nextConfig = {
     output: 'export',
     trailingSlash: true,
     reactStrictMode: true,
     basePath: isBasePrefixAvailable ? `/${basePrefix}` : undefined,
     assetPrefix: isBasePrefixAvailable ? `/${basePrefix}/` : undefined,
     images: {
-        domain: ['https://firebasestorage.googleapis.com/v0/b/msf-mapswipe.appspot.com'],
+        domains: ['firebasestorage.googleapis.com'],
         deviceSizes: [640, 960, 1280, 1600, 1920],
+        unoptimized: true,
     },
-});
+};
+
+// Only wrap with `next-export-optimize-images` if no basePrefix (i.e., local/dev)
+if (!isBasePrefixAvailable) {
+    nextConfig = withExportImages({
+        ...nextConfig,
+        images: {
+            domains: ['firebasestorage.googleapis.com'],
+            deviceSizes: [640, 960, 1280, 1600, 1920],
+        },
+    });
+}
 
 module.exports = nextConfig;

src/components/ImageWrapper/index.tsx

@@ -21,11 +21,21 @@ function ImageWrapper(props: Props) {
         ...otherProps
     } = props;
 
+    const basePrefix = process.env.NEXT_PUBLIC_BASE_PREFIX ?? '';
+    const isExternal = src.startsWith('http://') || src.startsWith('https://');
+
+    let modifiedSrc = src;
+
+    const isBasePrefixAvailable = basePrefix !== undefined && basePrefix.trim().length > 0;
+    if (isBasePrefixAvailable) {
+        modifiedSrc = isExternal ? src : `/${basePrefix}/${src.replace(/^\/+/, '')}`;
+    }
+
     return (
         <div className={_cs(className, styles.imageWrapper)}>
-            {!nonOptimizedImage ? (
+            {(!nonOptimizedImage && !isBasePrefixAvailable) ? (
                 <Image
-                    src={src}
+                    src={modifiedSrc}
                     className={_cs(imageClassName, styles.image)}
                     fill
                     // eslint-disable-next-line react/jsx-props-no-spreading
@@ -34,7 +44,7 @@ function ImageWrapper(props: Props) {
             ) : (
                 // eslint-disable-next-line @next/next/no-img-element
                 <img
-                    src={src}
+                    src={modifiedSrc}
                     className={_cs(imageClassName, styles.image, styles.nonOptimizedImage)}
                     alt={otherProps.alt}
                 />

src/components/Navbar/index.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 import { useTranslation } from 'next-i18next';
 import { useRouter } from 'next/router';
 import { _cs } from '@togglecorp/fujs';
-import Image from 'next/image';
 import { MdMenu } from 'react-icons/md';
 import { IoEarthSharp } from 'react-icons/io5';
 
@@ -12,6 +11,7 @@ import LanguageSwitcher from 'components/LanguageSwitcher';
 import DropdownMenu from 'components/DropdownMenu';
 import useBooleanState from 'hooks/useBooleanState';
 import languageTitleMap from 'utils/languages';
+import ImageWrapper from 'components/ImageWrapper';
 
 import i18nextConfig from '@/next-i18next.config';
 
@@ -42,10 +42,9 @@ function Navbar(props: Props) {
                     className={styles.logo}
                     href="/[locale]/"
                 >
-                    <Image
+                    <ImageWrapper
                         src="/logo.svg"
                         alt={t('mapswipe-logo')}
-                        fill
                     />
                 </Link>
                 <div