Handle blank env variable. Fixes broken assets.

vivek-nexus · Feb 18, 2025 · 7630fce · 7630fce
1 parent 5b16a05
commit 7630fce
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 9 deletions.
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -95,7 +95,8 @@ export default function RootLayout({
         className={`${figtree.className} animate__animated animate__fadeIn bg-black bg-[length:172px_172px] text-white/70 selection:bg-primary-800 selection:text-white/60`}
         // inline style due to dependency on environment variable
         style={{
-          backgroundImage: `url(${process.env.NEXT_PUBLIC_LINK_PREFIX}/bg-pattern.svg)`
+          // A blank env variable is getting evaluated to undefined, hence the check to replace it with empty string
+          backgroundImage: `url(${process.env.NEXT_PUBLIC_LINK_PREFIX ? process.env.NEXT_PUBLIC_LINK_PREFIX : ``}/bg-pattern.svg)`
         }}
       >
         {children}

diff --git a/src/components/Head/index.tsx b/src/components/Head/index.tsx
@@ -4,10 +4,12 @@ export default function Head() {
             <title>Listen</title>
             <meta name="description" content="Stop long form reading, cut screen time and start listening!" />
             <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-            <link rel="icon" href={`${process.env.NEXT_PUBLIC_LINK_PREFIX}/logo.png`} />
+            {/* A blank env variable is getting evaluated to undefined, hence the check to replace it with empty string */}
+            <link rel="icon" href={`${process.env.NEXT_PUBLIC_LINK_PREFIX ? process.env.NEXT_PUBLIC_LINK_PREFIX : ``}/logo.png`} />
             {/* https://melvingeorge.me/blog/nextjs-pwa */}
             {/* TODO add screenshot in manifest to provide rich install experience */}
-            <link rel="manifest" href={`${process.env.NEXT_PUBLIC_LINK_PREFIX}/manifest.json`} />
+            {/* A blank env variable is getting evaluated to undefined, hence the check to replace it with empty string */}
+            <link rel="manifest" href={`${process.env.NEXT_PUBLIC_LINK_PREFIX ? process.env.NEXT_PUBLIC_LINK_PREFIX : ``}/manifest.json`} />
             <meta name="theme-color" content="#00a885" />
             {/* Open graph tags */}
             <meta property="og:type" content="website" />

diff --git a/src/components/ImageWrapper/index.tsx b/src/components/ImageWrapper/index.tsx
@@ -9,6 +9,7 @@ type ImageWrapperProps = {
 
 export default function ImageWrapper({ src, className, alt }: ImageWrapperProps) {
     return (
-        <img src={`${process.env.NEXT_PUBLIC_LINK_PREFIX}/${src}`} className={className} alt={alt} />
+        // A blank env variable is getting evaluated to undefined, hence the check to replace it with empty string
+        <img src={`${process.env.NEXT_PUBLIC_LINK_PREFIX ? process.env.NEXT_PUBLIC_LINK_PREFIX : ``}/${src}`} className={className} alt={alt} />
     )
 }
diff --git a/src/components/Player/BackgroundMusicThroughVideo.tsx b/src/components/Player/BackgroundMusicThroughVideo.tsx
@@ -1,6 +1,6 @@
-import { useGenericStore } from "@/stores/useGenericStore";
-import { usePlayerStore } from "@/stores/usePlayerStore";
-import { MutableRefObject, useEffect, useRef } from "react";
+import { useGenericStore } from "@/stores/useGenericStore"
+import { usePlayerStore } from "@/stores/usePlayerStore"
+import { MutableRefObject, useEffect, useRef } from "react"
 
 export default function BackgroundMusicThroughVideo() {
     const isMobileOrTablet = useGenericStore((state) => state.isMobileOrTablet)
@@ -52,9 +52,9 @@ export default function BackgroundMusicThroughVideo() {
 
     return (
         // Fixed position tiny invisible video
-        // TODO: process.env.NEXT_PUBLIC_LINK_PREFIX evaluates to undefined in development. Need to figure out why (already tried a lot).
+        // A blank env variable is getting evaluated to undefined, hence the check to replace it with empty string
         <video ref={videoRef} loop className="fixed top-0 left-0 -z-50 h-2 w-1 pointer-events-none opacity-0">
-            <source src={`${process.env.NEXT_PUBLIC_LINK_PREFIX}/the-beat-of-nature-122841.mp4`} type="video/mp4" />
+            <source src={`${process.env.NEXT_PUBLIC_LINK_PREFIX ? process.env.NEXT_PUBLIC_LINK_PREFIX : ``}/the-beat-of-nature-122841.mp4`} type="video/mp4" />
             Your browser does not support video playback.
         </video>
     )