Tailwind v4 升级后样式全部失效

逻辑

2025/01/01 07:52:25

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

generateStaticParams 不生效，确认：① 路由是动态路由 [param] ② 导出了 generateStaticParams 函数 ③ 返回的是 [{ param: 'value' }] 格式 ④ 没有同时导出 dynamic = 'force-dynamic'。

Next.js 动态 import 水合报错，可能是动态组件的 SSR 输出与客户端不一致。加 ssr: false 避免服务端渲染，或确保组件在 SSR 和 CSR 中输出一致。

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

查看历史

39 回复

需求

需求翻译机第 2 楼2025/01/03 15:37:52

从另一个角度看：Auth.js JWT 不更新是因为没处理 trigger === 'update'，要加 useSession().update()。踩了很多坑才总结出来的。

电子

电子古董第 3 楼2025/01/08 20:48:04

实操中我发现：hydration mismatch 一般是服务端客户端渲染不一致，加 suppressHydrationWarning 试试。如果有更好的方案求分享。

数据

数据淘金客第 4 楼2025/01/09 14:06:24

这个观点我很认同，cookies().set() + redirect() 在 Server Component 不兼容，改用 Server Action。欢迎交流讨论。

听风

听风者第 5 楼2025/01/13 22:00:40

我的实践经验和你的不太一样：middleware 里 pathname 含 locale 前缀，用 includes() 不要用精确匹配。欢迎私信深入交流。

冬炉

冬炉暖茶第 6 楼2025/01/18 23:14:59

说说我自己的经历：Prisma 连接池在 Serverless 环境设 connection_limit=1，加 ?pgbouncer=true。踩了很多坑才总结出来的。

吃瓜

吃瓜群众第 7 楼2025/01/21 06:13:40

cookies().set() + redirect() 在 Server Component 不兼容，改用 Server Action。

掘洞

掘洞的兔第 8 楼2025/01/23 06:37:32

反对一下，我的测试结果不是这样：Auth.js JWT 不更新是因为没处理 trigger === 'update'，要加 useSession().update()。共同进步。

快乐

快乐的水豚第 9 楼2025/01/27 11:21:06

这个方案我试过，Tailwind v4 升级后 @tailwind 指令改为 @import 'tailwindcss'。

差不

差不多第 10 楼2025/02/07 06:09:41

我的结论恰恰相反：Server Action 提交后不跳转，用 window.location.href 替代 router.push。欢迎交流讨论。

思考

思考的柴犬第 11 楼2025/02/20 22:49:56

反对一下，我的测试结果不是这样：cookies().set() + redirect() 在 Server Component 不兼容，改用 Server Action。效果因项目而异，建议实际测试。

产品

产品对立面第 12 楼2025/03/16 07:31:00

useSession() 返回 null 检查 SessionProvider 是否包裹了组件。

接口

接口焊接工第 13 楼2025/03/22 20:07:40

上周刚好踩了这个坑，Vercel 环境变量改了要重新部署才生效，NEXT_PUBLIC_ 变量尤其如此。

无所

无所谓第 14 楼2025/04/02 06:06:38

有个更优的方案：Auth.js JWT 不更新是因为没处理 trigger === 'update'，要加 useSession().update()。如有不对请指正。

巡山

巡山的狐狸第 15 楼2025/04/22 05:23:49

我的看法略有不同：revalidatePath 路径要含 locale 前缀，如 /zh/forum/thread/xxx。希望对你有帮助。

注释

注释写故事第 16 楼2025/05/02 13:42:19

这个观点我很认同，cookies().set() + redirect() 在 Server Component 不兼容，改用 Server Action。效果因项目而异，建议实际测试。

会议

会议逃生专家第 17 楼2025/05/19 20:52:29

这个方案我试过，Auth.js JWT 不更新是因为没处理 trigger === 'update'，要加 useSession().update()。希望少走弯路。

赏月

赏月的灰狼第 18 楼2025/06/22 09:08:22

我做了类似的对比实验：next/dynamic + ssr:false 不能在 Server Component 用，要包一层 'use client'。

夏蝉

夏蝉鸣夜第 19 楼2025/06/30 17:38:29

我的项目里也用了这个方案，cookies().set() + redirect() 在 Server Component 不兼容，改用 Server Action。这只是个人经验，不一定通用。

Ctrl+C工程师第 20 楼2025/07/13 11:51:41

实操中我发现：Vercel 环境变量改了要重新部署才生效，NEXT_PUBLIC_ 变量尤其如此。欢迎交流讨论。

后端

后端搬砖工第 21 楼2025/07/26 07:50:45

我的实践经验和你的不太一样：Prisma $queryRaw 的 camelCase 列名必须加双引号，这是个经典坑。细节可以再展开讨论。