Next.js 15首屏闪样式根本原因是构建链路与加载时机不匹配:服务端渲染HTML时缺失对应样式类,浏览器先用默认样式渲染,待客户端水合完成、JS注入CSS或切换主题后重绘,产生几十毫秒闪烁;全局CSS仅允许在app/layout.tsx中单点引入app/globals.css,禁止任意组件(尤其Server Component)import非模块化CSS,否则报错或document is not defined;删postcss.config.js以启用JIT模式,CSS Modules需配合"use client"声明,关键样式须内联<head>并阻塞渲染,Tailwind暗色模式需在<head>中用内联脚本提前设置data-theme。

为什么Next.js 15首屏会闪样式?
根本不是CSS写错了,而是构建链路和加载时机不匹配:服务端渲染出的HTML没有对应样式类,浏览器先用默认样式画一遍,等客户端水合完成、JS注入CSS或切换主题后才重绘——这几十毫秒就是闪烁窗口。
全局CSS只能从app/globals.css单点引入
Next.js 15禁止在任意组件(尤其是Server Component)里import './xxx.css',否则构建报错或运行时报document is not defined。这不是bug,是设计约束。
-
app/globals.css必须被app/layout.tsx直接import,且仅此一处 - 所有其他非模块化CSS(比如第三方reset.css)不能直接import,得用
useEffect动态插入<style>标签 - 删掉项目根目录的
postcss.config.js——它会禁用JIT模式,导致Tailwind退化成全量CSS,拖慢注入速度
CSS Modules必须配合"use client"
哪怕你只用.module.css做局部样式,只要组件涉及DOM操作、状态或交互,就必须声明"use client",否则类名生成失效,样式不生效。
DMap GL地图JSAPI(dmapgl)开发指南。用于编写、审查、调试 DMap 地图 API 代码,涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。
- 把
"use client"放在文件顶部,再 importstyles from './Button.module.css' - Server Component里不能import任何.css文件,但可以import .module.css——只是它不会挂载到DOM,实际无效
- 如果组件纯服务端渲染(比如静态页头部),就别用CSS Modules,改用
app/globals.css里定义的全局类
关键样式必须阻塞渲染
把首屏必需的CSS内联进<head>,不是“放进去就行”,而是要确保它真正阻塞HTML解析直到就绪。
立即学习“前端免费学习笔记(深入)”;
- 用
next/font加载字体时,务必绑定font.variable到<html>或<body>,而不是误用font.className - Tailwind暗色模式闪烁?必须在
app/layout.tsx的<head>里插内联脚本,读localStorage.getItem('theme')并立即设document.documentElement.dataset.theme - 避免
@import和JS动态创建<link>——它们绕过预加载机制,必然FOUC
最难的不是写代码,是判断哪些样式算“关键”:它取决于设备宽度、用户是否登录、当前路由参数,甚至A/B实验分组。这个边界划错,要么白内联,要么HTML体积暴增。

















