将next.js与环境变量一起使用时，为什么我的API密钥可见？

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

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

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

index.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);
  }

next.config.js

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

now.config.json

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