Next.js中能否导入Node.js模块？以crypto生成UUID为例

先看你的代码：

import crypto from 'crypto';

const generateUuid = () => {
  console.log(crypto.randomBytes(10).toString('hex'))
}

return <button onClick={generateUuid}>Generate UUID</button>

为啥老文章说要用getInitialProps？ #

这是早年Next.js的遗留经验，针对的是Pages Router的旧版本：

• 以前Next.js的组件代码会同时在服务端渲染（SSR）和客户端注水（hydration）阶段执行
• crypto是Node.js独有的内置模块，浏览器环境原生没有这个模块，如果组件顶层直接导入并同步执行相关代码，客户端打包时会抛出Cannot find module 'crypto'的错误
• getInitialProps能限制代码仅在服务端运行，避免客户端加载Node.js专属模块

你的代码为啥能正常运行？ #

现在的Next.js（不管是新版Pages Router还是App Router）已经做了自动适配优化：

1. 环境自动兼容：当你把crypto的调用放在点击事件这种客户端交互逻辑里时，Next.js会在浏览器环境自动用原生的Web Crypto API替换Node.js的crypto实现，保证代码能正常执行
2. 按需打包：服务端渲染阶段不会执行客户端交互代码，也不会把这部分无关代码打包进服务端产物；客户端则只会拿到浏览器能识别的兼容版本，不会出现模块缺失问题

你的做法是否正确？ #

完全正确。核心原因：

• 你的generateUuid函数只有用户在浏览器中点击按钮时才会触发，属于纯客户端的交互逻辑，服务端渲染过程中根本不会碰这部分代码
• Next.js现在的自动兼容机制已经把Node.js模块的浏览器适配处理好了，根本不需要额外使用getInitialProps

额外提醒 #

• 如果要在服务端渲染阶段生成UUID（比如组件顶层初始化代码、getStaticProps/getServerSideProps数据获取函数里），直接用Node.js的crypto模块完全没问题，因为这部分代码只会在服务端运行
• 要是用App Router开发，记得给组件加上'use client'指令（没加的话补上），明确标记这是客户端组件，让Next.js的优化更精准

内容的提问来源于stack exchange，提问作者Ali Bahaari