Next.js应用报错crypto.createPrivateKey is not a function 求助

我在Next.js应用中使用Node.js crypto模块的createPrivateKey函数，已知该函数从Node.js v11.6.0开始支持，而我的Node.js版本是16.16.0，满足版本要求，但运行时依然报错"TypeError: crypto.createPrivateKey is not a function"。

我的环境信息：

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 10 Pro N
Binaries:
  Node: 16.16.0
  npm: N/A
  Yarn: N/A
  pnpm: N/A
Relevant packages:
  next: 13.0.6
  eslint-config-next: 13.0.6
  react: 18.2.0
  react-dom: 18.2.0

我的代码实现：

const [privateKey, setPrivateKey] = useState("");
const [publicKey, setPublicKey] = useState("");

useEffect(() => {
  // 从私钥创建私钥对象
  const _privateKey = createPrivateKey({
    key: privateKey,
    format: "pem",
    type: "pkcs1",
  } as PrivateKeyInput);

  // 从私钥导出公钥
  const publicKey = _privateKey.export({
    type: "spki",
    format: "pem",
  });

  console.log("Private key:", privateKey);
  console.log("Public key:", publicKey.toString("hex"));
  setPublicKey(publicKey.toString("hex"));
}, [privateKey]);

问题原因 #

你这段代码写在客户端组件的useEffect中，会在浏览器环境执行，但crypto.createPrivateKey是Node.js专属的服务器端API，浏览器环境中不存在这个方法，因此触发报错。

解决方案 #

• 移至服务器组件：若使用Next.js 13+的App Router，直接将密钥处理逻辑放在服务器组件中（默认即为服务器组件），服务器组件在Node.js环境运行，可正常调用crypto模块。
• 封装为API路由：在pages/api或app/api目录下创建API路由文件，将密钥处理逻辑写在路由处理函数内，客户端通过fetch调用该API获取处理后的公钥。
• Pages Router下的服务器端执行：若使用Pages Router，可将逻辑放在getServerSideProps或getStaticProps中，这些方法在服务器端运行，处理完成后将结果传递给客户端组件。

注意：私钥属于敏感信息，绝对不能在客户端环境处理，必须留在服务器端，避免泄露风险。

内容的提问来源于stack exchange，提问作者0brine