为啥在将 next.js 与环境变量一起使用时我的 API 密钥可见?
Posted
技术标签:
【中文标题】为啥在将 next.js 与环境变量一起使用时我的 API 密钥可见?【英文标题】:Why is my API key visible when using next.js with environment variables?为什么在将 next.js 与环境变量一起使用时我的 API 密钥可见? 【发布时间】:2020-06-30 00:54:59 【问题描述】:我遵循 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"
【问题讨论】:
【参考方案1】:NextJS 使用来自 Webpack 的 DefinePlugin 实现环境变量。与process.env
一起使用的所有变量在编译时都替换为.env
中的变量。来自文档:
Next.js 将在 build 时将 process.env.customKey 替换为 'my-value'。
与服务器端不同,NextJS 仍然是用于在浏览器中运行 javascript 的客户端框架,目前无法从浏览器中隐藏这些键。
如果必须隐藏密钥,则必须添加服务器(或无服务器功能)。
您可以添加一个 API 端点并从前端调用它,这将连接到 3rd 方服务并返回获取的数据。
其中一种方法是添加.env
并使用dotenv 将其加载到Node 进程。
.env
API_KEY=@api-key-moviedb
next.config.js
require('dotenv').config();
module.exports =
/* config options here */
;
用法
process.env.API_KEY
这样您的 API 密钥就不会暴露。
Next.js with dotenv example
API routes in Next.js
【讨论】:
@api-key-moviedb
是从哪里来的?
@ZackShapiro 那是<put-your-api-key-here>
插槽
Next.js 从 Next.js 9.4 开始自动支持环境变量加载。您可以在博客文章中了解更多信息。访问文档以了解如何使用 Next.js 9.4+ 中的环境变量支持以及环境变量示例以查看它的实际操作。以上是关于为啥在将 next.js 与环境变量一起使用时我的 API 密钥可见?的主要内容,如果未能解决你的问题,请参考以下文章