Next.js中用React-bootstrap Card未加'use client'报错原因解析

核心原因：Next.js默认组件是服务器组件，而react-bootstrap组件是客户端组件 #

• Next.js 13+ 默认启用React Server Components（RSC），新建组件如果没标记'use client'，会被当作服务器组件在Node.js环境运行。服务器组件无法访问浏览器DOM API，也不能使用useState、useEffect这类客户端专属的React钩子。
• react-bootstrap的所有UI组件（包括Card、Card.Body）本质都是客户端组件——它们依赖浏览器环境渲染，内部用到了客户端API，需要和DOM交互（比如绑定事件、处理样式），还依赖bootstrap的CSS在客户端加载生效。

报错的具体原因 #

当你在服务器组件里直接引用react-bootstrap的Card或Card.Body时，Next.js的服务器端打包流程会尝试处理这些客户端组件的导出。但客户端组件的模块信息只存在于客户端打包清单（Client Manifest）中，服务器打包流程找不到对应的记录，就会抛出Could not find the module... in the React Client Manifest的错误。

加'use client'的作用 #

给组件加上'use client'指令后，Next.js会将其标记为客户端组件，打包到客户端bundle中，在浏览器环境运行。此时引用react-bootstrap的客户端组件会走正常的客户端打包流程，能正确找到对应的模块和依赖，报错自然就消失了。

内容的提问来源于stack exchange，提问作者Şule Demir