Next.js客户端组件报错TypeError: crypto.randomUUID is not a function求助

我的Next.js应用在http://localhost:3000/上运行正常，但在hosts文件添加127.0.0.1 whatever.local后，访问http://whatever.local:3000/时，客户端组件抛出错误：

TypeError: crypto.randomUUID is not a function

报错代码是在渲染<option>时使用crypto.randomUUID()作为key：

{lookupItemList.map((lookupItem: LookupItem) =>
    <option
        key={crypto.randomUUID()}
        value={lookupItem.key}>
        {lookupItem.value}
    </option>
)}

浏览器的crypto API仅在安全上下文中可用，安全上下文包括HTTPS协议、localhost或127.0.0.1地址。自定义的.local域名如果使用HTTP访问，会被浏览器判定为非安全上下文，导致crypto.randomUUID()无法调用。

1. 改用HTTPS访问自定义域名 #

启动Next.js时开启HTTPS模式，命令如下：

NODE_TLS_REJECT_UNAUTHORIZED=0 next dev --experimental-https

之后访问https://whatever.local:3000/，浏览器会识别为安全上下文，crypto API即可正常使用。

2. 替换为其他唯一ID生成方式 #

如果不想用HTTPS，可以使用第三方库或自定义函数生成唯一ID：

• 使用uuid库：
  先安装依赖：

  npm install uuid
  

  然后在组件中使用：

  import { v4 as uuidv4 } from 'uuid';
  
  {lookupItemList.map((lookupItem: LookupItem) =>
      <option
          key={uuidv4()}
          value={lookupItem.key}>
          {lookupItem.value}
      </option>
  )}
  

• 自定义简单生成函数：

  const generateUniqueId = () => {
    return Date.now().toString(36) + Math.random().toString(36).slice(2);
  };
  
  // 替换crypto.randomUUID()为generateUniqueId()
  

3. 直接使用数据本身的唯一属性作为key #

这是最优方案，因为React的key需要稳定且与数据绑定，避免不必要的组件重渲染。既然lookupItem已有key属性，直接用它即可：

{lookupItemList.map((lookupItem: LookupItem) =>
    <option
        key={lookupItem.key}
        value={lookupItem.key}>
        {lookupItem.value}
    </option>
)}

内容的提问来源于stack exchange，提问作者Fabio Scagliola