reactjs - nextjs 中的环境变量

Question

我真的一直在努力了解如何在 nextjs 中处理环境变量，但我仍然不明白。我只是想从下面的代码中隐藏我的 API key 。据我了解，我只能通过使用 getServerSideProps 或 getStaticProps 来完成。如果是这样的话，虽然我仍然不知道应该如何相应地修改我的代码

       import { createContext, useState, useEffect } from 'react';

const WeatherContext = createContext({
  searchLocation: (input) => {},
  btnHandler: (input) => {},
  weather: '',
  isLoading: true,
});

export function WeatherContextProvider(props) {
  const [weather, setWeather] = useState({});
  const [city, setCity] = useState('');
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(false);
  const [unit, setUnit] = useState('metric');
  const [searchInput, setSearchInput] = useState('');
  

  const btnHandler = () => {
    if (unit === 'metric') {
      setUnit('imperial');
    } else {
      setUnit('metric');
    }
  };

  const searchLocation = async (input = searchInput, units = unit) => {
    if (loading) {
      input = 'London';
    }
    try {
      const firstResponse = await fetch(
        `https://api.openweathermap.org/data/2.5/weather?q=${input}&units=${units}&appid=KEY`
      );
      
      const firstData = await firstResponse.json();
      if (!firstResponse.ok) {
        setError(true);
        throw new Error('Something went wrong');
      }

      let lon = firstData.coord.lon;
      let lat = firstData.coord.lat;

      const response = await fetch(
        `https://api.openweathermap.org/data/2.5/onecall?lat=${lat}&lon=${lon}&units=${units}&exclude=&appid=KEY`
      );
      const data = await response.json();

      if (!response.ok) {
        setError(true);
        throw new Error('Something went wrong');
      }
      setWeather(data);
      setCity(firstData.name + ', ' + firstData.sys.country);
      setSearchInput(firstData.name);
      setLoading(false);
      setError(false);
    } catch (error) {
      setError(error.message);
      console.log(error);
    }
  };

  useEffect(() => {
    searchLocation();
  }, [unit, searchInput]);

  const context = {
    searchLocation: searchLocation,
    city: city,
    weather: weather,
    isLoading: loading,
    error: error,
    btnHandler: btnHandler,
    unit: unit,
    searchInput: searchInput,
  };

  return (
    <WeatherContext.Provider value={context}>
      {props.children}
    </WeatherContext.Provider>
  );
}

export default WeatherContext;

Answer 1

不幸的是，你是对的，如果你想从客户端访问 api，那么你将公开 env 变量，而从 getServerSideProps 或 getStaticProps 进行的任何调用都可以使 env 变量在服务器端保持私有(private)。

同样重要的是要记住，在你的 React 代码中创建一个将在客户端公开/访问的 env 变量时，你需要在 env 变量名称前加上 NEXT_PUBLIC_ ，这样 nextjs 就知道在客户端允许 env 变量。

话虽如此，处理 api key 情况的最佳方法似乎是在项目的根目录下创建一个 .env 文件并添加类似 NEXT_PUBLIC_API_KEY=insert-your-api-键在这里。

如果您绝对需要将此 api key 保密，我认为您最好的做法是在您的页面文件夹 (/pages/[slug].jsx) 和该页面的 getServerSideProps 中创建一个动态路由，您可以使用在服务器端进行 api 调用的参数数据，这将使您的 api key 包含在服务器端。