为什么在使用带有环境变量的 next.js 时我的 API 密钥可见？

Question

我遵循 next.js 文档并在现在的服务器上添加了一个自定义 api 密钥。

问题是当我运行now dev并转到源选项卡时，我可以在那里看到我的 api 密钥。

api 密钥保存在.env.build文件中，这是我的代码：

索引.js

import { useState, useEffect } from 'react';
const axios = require('axios');

import Nav from '../src/components/Nav';
import Head from '../src/components/Head';
import Movies from '../src/components/movies';

const key = process.env.API_KEY;

const index = () => {
  const [currentMovies, setCurrentMovies] = useState([]);

  const getTopMovies = async url => {
    const fetchData = await axios.get(url).then(response => {
      const [...data] = response.data.results;
      setCurrentMovies({ data: data });
    });
  };

  useEffect(() => {
    getTopMovies(
      `https://api.themoviedb.org/3/discover/movie?primary_release_date.gte=2019-12-12&primary_release_date.lte=2020-02-22&api_key=${key}`
    );
  }, []);

  if (currentMovies.data === undefined) {
    console.log('Loading...');
  } else {
    console.log(currentMovies.data);
  }

下一个.config.js

module.exports = {
  env: {
    API_KEY: process.env.API_KEY
  }
};

现在.config.json

{
  "build": {
    "env": {
      "API_KEY": "@api-key-moviedb"
    }
  }
}

Answer 1

NextJS工具的环境变量与DefinePlugin从的WebPack。所有使用 withprocess.env的变量.env在编译时都替换为 in 变量。从文档：

Next.js 将在构建时用 'my-value' 替换 process.env.customKey 。

与服务器端不同，NextJS 仍然是一个在浏览器中运行 JavaScript 的客户端框架，并且目前没有办法对浏览器隐藏这些键。

如果必须隐藏密钥，则必须添加服务器（或无服务器功能）。

您可以添加一个 API 端点并从前端调用它，该端点将连接到 3rd 方服务并返回获取的数据。

一种方法是.env使用dotenv将其添加并加载到 Node 进程。

.env

API_KEY=@api-key-moviedb

下一个.config.js

require('dotenv').config();

module.exports = {
  /* config options here */
};

用法

process.env.API_KEY

这样您的 API 密钥就不会暴露。

Next.js 与 dotenv 示例

Next.js 中的 API 路由