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

Question

我已经使用 git 部署了下一个 js 应用程序以进行 netlify，并且我有一个 .env.local 文件存储后端路由 url，我在整个应用程序中使用它来获取数据要求。问题是部署后 process.env.NEXT_PUBLIC_BACKEND_ROUTE returns 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 中工作

Getting environment variables to work in next js and netlify

javascript

deployment

environment-variables

next.js

netlify