crypto.createPrivateKey 不是 next.js 应用程序中的 function

Question

In my next.js app i use the function createPrivateKey from the crypto module from node.js as stated in this thread: TypeError: crypto.createPrivateKey is not a function it says the function got added in v11.6.0 but when I run npx next info i get:

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

createPrivateKey doc:

https://nodejs.org/api/crypto.html#crypto_crypto_createprivatekey_key

how I call the function:

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

  useEffect(() => {
    // Create a private key object from the private key
    const _privateKey = createPrivateKey({
      key: privateKey,
      format: "pem",
      type: "pkcs1",
    } as PrivateKeyInput);

    // Export the private key as a public key
    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]);

Answer 1

The pre-rendering process of Next.js is as follow:

1. Next.js pre-renders your React page component on the server (represented as the NextPage type in TypeScript), so you need to add import crypto from 'crypto'; crypto.randomUUID() import crypto from 'crypto'; crypto.randomUUID() to generate a unique id on the server.

2. After the HTML page is returned to the browser as a result of pre-rendering, you need to use window.crypto.randomUUID() because crypto.randomUUID() is from the Node.js package in the server environment, not in the browser. U can add the following check to your code:

// The following Node.js package is imported on the server-side 
// and not available in the browser
import crypto 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() : crypto.randomUUID()

See Safely Accessing Web APIs on the Next.js doc to learn more.

Node.js and web browsers have some APIs with the same names [^1], which cause conflict in your Next.js app. Therefore, you need to be explicit and specific about which environment (Node.js or browsers) the APIs belong to.

[^1]: This might be because both Chrome and Node.js use the same V8 JavaScript engine under the hood, so they share some API interfaces