Tengo un backend de Strapi y una aplicación de frontend de Next.js implementada en DigitalOcean. En DigitalOcean se establece una variable de entorno para la interfaz: API_URL = ${APP_URL}/api

Busco esta variable para generar la url base:

 // constants.js export const BASE_URL = process.env.NODE_ENV === "production" ? process.env.API_URL : "http://localhost:1337";

Parece funcionar bien, la aplicación obtiene el contenido del backend en localhost y también en la implementación. El problema surge cuando trato de cargar imágenes cuya ruta debería ser la concatenación de la URL base y la ruta relativa obtenida. He creado una función utilitz para esto:

 // utilities.js import { BASE_URL } from "./constants"; export const getImageURL = (relPath) => `${BASE_URL}${relPath}`;

Cuando uso esta función para una etiqueta html img, se carga tanto en entornos de desarrollo como de producción:

<img src={getImageURL(homePage.Hero[0].Image.url)} />

Pero cuando trato de establecer un fondo para un div en el mismo componente, la URL base no está definida y la imagen no aparece en el sitio implementado (funciona bien en localhost).

No tengo idea de por qué la generación de URL está bien para una parte del código y no está bien para la otra.

El comando de compilación para implementar es: yarn build && next export -o _static

Aquí está el componente completo:

 import styles from "../styles/Home.module.css"; import { getImageURL } from "../lib/utilities"; import { useEffect } from "react"; import { BASE_URL } from "../lib/constants"; export default function Home({ homePage }) { console.log(BASE_URL); // undefined useEffect(() => { if (window) { console.log(BASE_URL); // undefined document.getElementById("container").style.backgroundImage = `url('${getImageURL(homePage.Hero[0].Image.url)}')`; // url is undefined/realtivepath } }); return ( <div id="container"> <img src={getImageURL(homePage.Hero[0].Image.url)} /> </div> ); } export const getStaticProps = async () => { const res = await fetch(`${BASE_URL}/home-page`); // OK for dev and deploy const homePage = await res.json(); return { props: { homePage, }, }; };