Tailwind v4 升级后样式全部失效

会飞

2026/06/07 11:30:08

next-intl 配置后 404，一般是 middleware 匹配规则不对。检查 middleware.ts 中 matcher 配置，确保排除了 /api、/_next、/admin 等非国际化路径。另外检查 defaultLocale 和 locales 配置是否正确。

Vercel Hobby 计划函数超时 10s，Pro 计划 60s，Enterprise 900s。如果超时：① 优化查询减少耗时 ② 拆分长任务 ③ 用 waitUntil() 在后台继续执行 ④ 升级 Vercel 计划 ⑤ 考虑用队列异步处理。

Vercel 环境变量不生效，检查三点：① 环境变量是否添加到了正确的环境（Production/Preview/Development）② NEXT_PUBLIC_ 前缀的变量需要重新部署才生效 ③ 修改环境变量后必须重新 deploy，不是自动生效。

next/image 图片模糊或变形，检查：① 是否设置了 width/height 或 fill ② fill 模式需要父容器 position: relative ③ priority 只给 LCP 图片 ④ sizes 属性帮助浏览器选择正确尺寸 ⑤ 避免在 Server Component 中用 ssr:false 包装。

Next.js 15 中 next/dynamic + ssr:false 在 Server Component 中不允许。解决：创建一个 'use client' 的包装组件，在包装组件中用 next/dynamic + ssr:false，然后在 Server Component 中导入这个包装组件。

查看历史

27 回复

热更

热更新选手第 2 楼2026/06/09 12:53:51

分享一下我的做法：revalidatePath 路径要含 locale 前缀，如 /zh/forum/thread/xxx。欢迎交流讨论。

老张

老张第 3 楼2026/06/15 06:33:07

我的踩坑经验：hydration mismatch 一般是服务端客户端渲染不一致，加 suppressHydrationWarning 试试。感谢楼主的启发。

近水

近水含烟第 4 楼2026/06/15 14:37:08

我的项目里也用了这个方案，cookies().set() + redirect() 在 Server Component 不兼容，改用 Server Action。如有不对请指正。

大叔

大叔第 5 楼2026/06/19 04:44:58

Auth.js JWT 不更新是因为没处理 trigger === 'update'，要加 useSession().update()。

Bug猎人第 6 楼2026/06/20 13:16:46

我做了类似的对比实验：cookies().set() + redirect() 在 Server Component 不兼容，改用 Server Action。有疑问可以继续问。

雾里

雾里看花第 7 楼2026/06/20 22:23:06

我的结论恰恰相反：Auth.js JWT 不更新是因为没处理 trigger === 'update'，要加 useSession().update()。欢迎私信深入交流。

算法

算法炼丹师第 8 楼2026/06/21 06:48:26

结合我最近的项目经验：Auth.js JWT 不更新是因为没处理 trigger === 'update'，要加 useSession().update()。希望少走弯路。

林间

林间晨露第 9 楼2026/06/27 04:33:10

这个思路很巧妙，revalidatePath 路径要含 locale 前缀，如 /zh/forum/thread/xxx。效果因项目而异，建议实际测试。

云中

云中漫步第 10 楼2026/06/30 15:49:44

Auth.js JWT 不更新是因为没处理 trigger === 'update'，要加 useSession().update()。

追日

追日落第 11 楼2026/07/01 04:18:36

上周刚好踩了这个坑，cookies().set() + redirect() 在 Server Component 不兼容，改用 Server Action。期待更多实战经验分享。

拾光

拾光者第 12 楼2026/07/03 17:02:32

补充一个边界情况：Tailwind v4 升级后 @tailwind 指令改为 @import 'tailwindcss'。细节可以再展开讨论。

春暖

春暖花开第 13 楼2026/07/05 09:38:01

说个反直觉的发现：Server Action 提交后不跳转，用 window.location.href 替代 router.push。

观星

观星者第 14 楼2026/07/06 06:06:39

middleware 里 pathname 含 locale 前缀，用 includes() 不要用精确匹配。

奔跑

奔跑的树懒第 15 楼2026/07/08 00:40:08

反对一下，我的测试结果不是这样：Prisma 连接池在 Serverless 环境设 connection_limit=1，加 ?pgbouncer=true。

落日

落日余晖第 16 楼2026/07/11 10:53:38

结合我最近的项目经验：Tailwind v4 升级后 @tailwind 指令改为 @import 'tailwindcss'。一起学习。

赏月

赏月的灰狼第 17 楼2026/07/11 12:42:39

上周刚好踩了这个坑，next/dynamic + ssr:false 不能在 Server Component 用，要包一层 'use client'。期待更多实战经验分享。

吃代

吃代码的猫第 18 楼2026/07/11 14:40:54

我调研过这块，Prisma $queryRaw 的 camelCase 列名必须加双引号，这是个经典坑。如有不对请指正。

注释

注释写故事第 19 楼2026/07/13 02:21:37

结合我最近的项目经验：cookies().set() + redirect() 在 Server Component 不兼容，改用 Server Action。实践出真知，建议动手试试。

精神

精神小伙第 20 楼2026/07/13 14:34:21

我调研过这块，hydration mismatch 一般是服务端客户端渲染不一致，加 suppressHydrationWarning 试试。有疑问可以继续问。

冲浪

冲浪的海豹第 21 楼2026/07/14 19:43:08

hydration mismatch 一般是服务端客户端渲染不一致，加 suppressHydrationWarning 试试。