直接import bootstrap css会闪，因为next.js ssr阶段不执行css import，浏览器先渲染无样式html，待客户端js加载、css下载解析后才重绘，造成fouc；须用?raw在app/layout.tsx中内联至最前，同时确保tailwind content字段不扫描node_modules、data-bs-theme服务端初始值与客户端同步。
为什么直接 import 'bootstrap/dist/css/bootstrap.min.css' 会闪
因为 Next.js 的服务端渲染（SSR）阶段不执行 CSS import，浏览器先渲染无样式的 HTML，等客户端 JS 加载完、CSS 文件下载并解析后才重绘——这就是 FOUC（Flash of Unstyled Content）。错误日志里不会报错，但你能肉眼看到“白屏→跳变→正常”的过程。
必须把 Bootstrap CSS 内联进
外链 CSS 至少多一个 RTT 延迟（300–800ms），而内联能确保样式随 HTML 一起到达。但不能手动复制整包 CSS——bootstrap.min.css gzip 后约 200KB，直接塞进去会阻塞 HTML 解析。
Miller CSV TSV JSON 数据处理器
下载
Miller (mlr) 是一个命令行工具，用于查询、整形和重新格式化名称索引数据，如 CSV、TSV、JSON 和 JSON Lines。它将 awk、sed、cut、join 和 sort 的功能整合到一个专为结构化数据处理而构建的单一工具中。
- 在
app/layout.tsx中用?raw加载：import bootstrapCss from 'bootstrap/dist/css/bootstrap.min.css?raw' - 把它放进
<style>{bootstrapCss}</style>，且必须放在内最前面（早于<title></title>或其他<style></style>） - 只对
bootstrap.min.css这个文件这么做；bootstrap-icons等字体资源仍走外链，它们不参与 FOUC
别让 Tailwind 的类名提取误删 Bootstrap 动态类
如果你同时用了 Tailwind，它的 content 字段若匹配太宽（比如 **/*.tsx），PostCSS 可能扫描到 node_modules/bootstrap 并认为 col-md-6、btn-outline-success 没被显式使用，直接从最终 CSS 中剔除。
- 检查
tailwind.config.ts的content字段：确保它不包含node_modules路径 - 如果必须共存，用
!important或更高优先级选择器隔离冲突，而不是依赖类名提取 - 动态类（如
show、active）由 JS 控制，不在构建时静态分析范围内，所以不用额外处理
data-bs-theme 切换时二次闪烁怎么破
只改 document.documentElement.setAttribute('data-bs-theme', 'dark') 不够——浏览器已按旧值完成首帧渲染，JS 执行完才触发变量重算，必然闪一次。
- 服务端 HTML 必须写死初始值：
（根据 cookie 或prefers-color-scheme快照决定） - 客户端 JS 设置完属性后，必须立即调用
bootstrap.Theme?.update()（Bootstrap 5.3+）或手动触发 CSS 变量刷新 - 不要在组件里用
useEffect直接操作document.documentElement；改用next-themes统一管理，保持data-theme和data-bs-theme同步
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
