Next.js中不能直接import Bootstrap CSS，因SSR不支持全局CSS导入；应通过\_document.tsx（Pages Router）或layout.tsx/metadata（App Router）引入；JS组件需"use client" + useEffect初始化；与Tailwind冲突时须调整加载顺序或舍弃一方；react-bootstrap等库可简化JS调用但不解决样式冲突。
为什么直接 import 'bootstrap/dist/css/bootstrap.min.css' 会报错
Next.js 的服务端渲染（SSR）阶段不支持直接在组件或页面顶层 import CSS 文件，尤其是当它被写在 pages/ 或 app/ 下的普通 React 组件里时，会触发 Global CSS cannot be imported from within node_modules 或 Document does not contain a valid 类错误。
根本原因是：Bootstrap 的 CSS 包含全局样式（如 body、h1 重置），Next.js 要求所有全局 CSS 必须在 _document.tsx（Pages Router）或通过 metadata / layout.tsx 中的 link 标签引入（App Router）。
- Pages Router：必须把
bootstrap.min.css放进pages/_document.tsx的Html→Head中，用next/document的getInitialProps注入 - App Router：不能在组件内
import，得用layout.tsx的<link rel="stylesheet" href="...">或metadata配置 - 如果用了 CSS-in-JS 库（如 styled-components），Bootstrap 的全局 class 仍生效，但 JS 插件（如 Modal、Dropdown）需手动初始化，且默认不兼容 SSR
如何让 Bootstrap 的 JS 组件（如 Modal、Toast）在 App Router 中正常工作
Bootstrap 的 JS 依赖浏览器 DOM 和 window 对象，而 App Router 默认服务端渲染，直接调用 new bootstrap.Modal(...) 会报 ReferenceError: window is not defined。
关键不是“禁用 SSR”，而是“延迟到客户端执行”。有且只有两种安全做法：
- 用
"use client"标记使用 Bootstrap JS 的组件，并在useEffect中初始化 —— 这是最小侵入方案 - 把整个 Bootstrap JS 初始化逻辑封装成自定义 Hook（如
useBootstrapModal），内部检查typeof window !== 'undefined' - 避免在
layout.tsx或page.tsx顶层调用bootstrap.Toast等构造函数 - 注意：Bootstrap 5.3+ 的 ESM 导出路径是
bootstrap/js/dist/modal.js，不是bootstrap/dist/js/bootstrap.min.js；后者是 UMD，Next.js 不推荐
使用 Bootstrap 类名时，为什么和 Tailwind 冲突
两者都定义了 .container、.row、.text-center 这类通用类名，且优先级取决于 CSS 加载顺序和 specificity。如果你同时引入了 Tailwind 和 Bootstrap 的 CSS，常见现象是：
-
.container宽度被 Tailwind 的max-w-7xl覆盖，导致 Bootstrap 响应式断点失效 -
.btn的 padding、font-size、border-radius 混合了两套规则，视觉异常 - 根本原因：Tailwind 的
@layer base会重置很多原生元素样式，而 Bootstrap 的reboot.css也做类似事，叠加后不可控 - 解决方案只有两个：要么彻底放弃 Bootstrap CSS，只用它的 JS + 自己写 utility class；要么删掉 Tailwind 的
@layer base，并确保 Bootstrap CSS 在 Tailwind 之前加载（但会失去 Tailwind 的 reset 优势）
要不要用 react-bootstrap 或 reactstrap 替代原生 Bootstrap
这两个库本质是把 Bootstrap 组件封装成纯 React 组件（如 <Modal>、<Navbar>），绕开原生 JS 初始化问题，但代价明显：
-
react-bootstrap维护活跃，支持 Bootstrap 5，但体积大（即使按需导入，Modal也会带入Overlay、Portal等依赖） - 它默认用
createPortal渲染弹窗，不依赖bootstrap.js，但 class 名仍是modal、fade，所以你仍得引入 Bootstrap CSS —— 并没省掉样式链 - 如果你只需要 Modal、Toast 几个组件，手写一个基于
useState+useEffect+ Bootstrap class 的轻量封装，代码量更少、可控性更高 - 注意：
react-bootstrap的Modal默认不处理 SSR 下的aria-modal和focus trap，仍需额外补丁
真正省事的点只有一个：不用自己写 useEffect(() => { const modal = new bootstrap.Modal(...); return () => modal.dispose(); }, []) —— 其余都得自己兜底。
