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

Question

我已经部署了下一个 js 应用程序来使用 git 进行 netlify，并且我有一个 .env.local 文件，该文件存储了我在发出 fetch 请求时在整个应用程序中使用的后端路由 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

我看到了两种可能性

1. 您的 .env.local 文件不在根目录中

2. 变量出现了一些奇怪的格式问题。在这种情况下，请尝试用引号将您的变量括起来：

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