（2023年的现代解决方案）

1. js在服务器上预先呈现React页面组件（在TypeScript中表示为NextPage类型），因此需要添加import crypto from 'crypto'; crypto.randomUUID()以在服务器上生成唯一的id。
   1.在HTML页面作为预呈现的结果返回到浏览器后，您需要使用window.crypto.randomUUID()，因为crypto.randomUUID()来自服务器环境中的Node.js包，而不是浏览器中的。U可以在代码中添加以下检查：

// The following Node.js package is imported on the server-side 
// and not available in the browser
import nodeCrypto from 'crypto';

// Use the web browser Crypto API if you're on the client, 
// otherwise use the Node.js Crypto API on the server
typeof window !== 'undefined' ? window.crypto.randomUUID() : nodeCrypto.randomUUID()

请参阅Next.js文档中的安全访问Web API以了解更多信息。

我想你是对的，React中的crypto包是不同的，要使用NodeJs中的crypto包，你可以调用：
window.crypto
我把它放在if中以确保它只在浏览器中呈现。

if (window !== undefined) {
    console.log('randomUUID', window.crypto.randomUUID());
}

或

import crypto from 'crypto';

console.log('crypto.randomUUID()', crypto.randomBytes(16).toString('hex'));

window.crypto.randomUUID()是好的。但是请注意crypto.randomUUID()只在安全上下文（HTTPS）中可用。当您在HTTP站点上时，它将导致TypeError: window.crypto.randomUUID is not a function。
所以应该是这样的：

if (typeof window !== "undefined" && typeof window.crypto.randomUUID === "function") {
    console.log('randomUUID', window.crypto.randomUUID());
}