Javascript 如何根据Next.js中的环境变量设置基本URL？

我在DigitalOcean上部署了Strapi后端和Next.js前端应用程序。 在DigitalOcean上，为前端设置了一个环境变量：

API_URL=${APP_URL}/API

我获取此变量以生成基本url：

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

它似乎工作正常，应用程序从localhost和deploy中的后端获取内容。当我尝试加载图像时，问题出现了，哪个路径应该是基本url和获取的相对路径的concatation。我已为此创建了utilitz函数：

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

当我将此函数用于html img标记时，它会在开发环境和产品环境中加载：

但是，当我尝试为同一组件中的div设置背景时，基本url未定义，并且映像不会出现在部署的站点中（在localhost上工作正常）

我不知道为什么url生成对于代码的某一部分是可以的，而对于另一部分是不可以的

部署的build命令是：

warn build&next export-o\u static

以下是完整的组件：

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,
    },
  };
};

从“./styles/Home.module.css”导入样式；
从“./lib/utilities”导入{getImageURL}；
从“react”导入{useffect}；
从“./lib/constants”导入{BASE_URL}；
导出默认函数主页（{homePage}）{
console.log（BASE_URL）；//未定义
useffect（（）=>{
如果（窗口）{
console.log（BASE_URL）；//未定义
document.getElementById（“container”）.style.backgroundImage=`url（'${getImageURL（homePage.Hero[0].Image.url）}'）`；//url未定义/realtivepath
}
});
返回(
);
}
export const getStaticProps=async（）=>{
const res=await fetch（`${BASE_URL}/主页`）；//对开发人员和部署人员来说是确定的
const homePage=wait res.json（）；
返回{
道具：{
主页
},
};
};

默认情况下，

Next.js

出于安全考虑，不会将所有

process.env.X

变量公开到浏览器

为了向浏览器公开环境变量，其名称中必须有前缀

NEXT\u PUBLIC\u

在您的情况下，将

API\u URL

重命名为

NEXT\u PUBLIC\u API\u URL

，然后使用它

---

有关更多信息：

能否共享您的

next.config.js

文件？