Question

我已经部署了下一个 js 应用程序来使用 git 进行 netlify，并且我有一个 .env.local 文件，用于存储我在整个应用程序中在发出获取请求时使用的后端路由 url。问题是在部署之后 process.env.NEXT_PUBLIC_BACKEND_ROUTE 返回 undefined。

.env.local 文件：

NEXT_PUBLIC_BACKEND_ROUTE=https://[the name of the url].herokuapp.com/

使用环境变量的页面示例：

import axios from 'axios';
import { useRouter } from 'next/router';
import { useEffect } from 'react';

export default function Home() {
  const router = useRouter();
  useEffect(() => {
    axios
      .get(`${process.env.NEXT_PUBLIC_BACKEND_ROUTE}/findAllPictures`)
      .then((doc) => {
        const arr = doc.data;

        if (arr.length !== 0) {
          const mappedArr = arr.map((obj) => {
            return obj.id;
          });
          const amount = mappedArr.length;
          const rand = Math.floor(Math.random() * amount);
          const routeId = mappedArr[rand];
          router.push(`/view/${routeId}`);
        }
      });
  }, [null]);
  return <div></div>;
}

Answer 1

我认为有两种可能性

您的 .env.local 文件不在根目录中
变量出现了一些奇怪的格式问题。在这种情况下，请尝试用引号将变量括起来：

NEXT_PUBLIC_BACKEND_ROUTE="https://[url 名称].herokuapp.com/"

让环境变量在下一个 js 和 netlify 中工作

1 个答案: