如何访问 NextJS 应用程序中组件中的私有 api 密钥

Question

在 nextjs 组件中访问私有 apiKey 的最佳实践是什么？

我有一个组件需要使用 apiKey 作为 prop：

<Component
    apiKey={apiKey}
/>

目前我将该 apiKey 保存在

env.local

文件中，没有

NEXT_PUBLIC_*

前缀。

在 env.local 中

API_KEY="abcdefghijk"

我正在尝试找出在组件中获取 apiKey 而不将其暴露给客户端的最佳方法。我设法让它工作的唯一方法是创建一个 api 路由，该路由将获取服务器端的 apiKey 并将其作为响应返回。

在路线.ts

export async function GET(request: Request) {
  return Response.json({ apiKey: process.env.API_KEY })
}

返回我的组件

const [apiKey, setApiKey] = useState("")

useEffect(() => {
  fetch("/api/MyRoute").then(async (response) => { 
       const data = await response.json();
       setApiKey(data["apiKey"])
    });
  }, []);

这对我来说根本不是正确的方法，有什么更好的做法建议吗？

Answer 1

如果您在服务器组件内调用您的 apiKey，它将完全在服务器上运行，并且可以安全地访问环境变量，而无需将您的 apiKey 暴露给客户端。

// app/page.js
import { Component } from './Component'

export default async function Page() {
  const apiKey = process.env.API_KEY
  
  return (
    <Component apiKey={apiKey} />
  )
}

您也可以创建在服务器端执行必要操作的 API 路由，而不是根本将 API 密钥传递给客户端：

export default async function handler(req, res) {
  const apiKey = process.env.API_KEY
  // Use the apiKey to perform the operation
  res.status(200).json({ result })
}

因此，如果您可以在服务器上执行需要 API 密钥的所有操作，那么这通常是最安全的方法。