next/image 图片显示模糊或变形

结网

2025/05/14 18:50:21

Shadcn UI 组件在 Server Component 报错，因为部分组件用了 Radix UI（Client Component）。确保使用 Shadcn 组件的页面或父组件加了 'use client'，或者把组件包裹在 Client Component wrapper 中。

Next.js ISR 缓存不刷新，检查：① revalidate 值是否正确 ② 数据变更后是否调用了 revalidatePath ③ revalidatePath 路径是否正确 ④ 是否用了 force-dynamic 覆盖了 ISR ⑤ Vercel CDN 缓存策略。

Vercel 部署后 CSS 丢失，常见原因：① Tailwind content 路径没包含组件目录 ② CSS 被 PurgeCSS 误删 ③ 生产构建时 PostCSS 配置问题 ④ 部分样式只在 Client Component 中生效但被服务端渲染时缺失。

遇到 hydration mismatch 报错，一般是服务端和客户端渲染的 HTML 不一致。常见原因：① 在组件中用了 Date.now() 或 Math.random() ② 用了 window/document 等浏览器 API ③ 服务端和客户端时区不同。解决：把动态值放到 useEffect 里设置，或加 suppressHydrationWarning。

查看历史

45 回复

数据

数据淘金客第 2 楼2025/05/15 09:14:21

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

并发

并发摆渡人第 3 楼2025/05/15 09:14:21

Tailwind v4 升级后 @tailwind 指令改为 @import 'tailwindcss'。

内卷

内卷幸存者第 4 楼2025/05/16 21:11:20

讲个真实案例：middleware 里 pathname 含 locale 前缀，用 includes() 不要用精确匹配。有疑问可以继续问。

老张

老张第 5 楼2025/05/19 20:15:04

next/dynamic + ssr:false 不能在 Server Component 用，要包一层 'use client'。

搬家

搬家的蚂蚁第 6 楼2025/05/19 22:30:11

我调研过这块，useSession() 返回 null 检查 SessionProvider 是否包裹了组件。感谢楼主的启发。

前端

前端魔法师第 7 楼2025/05/31 09:45:27

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

冬炉

冬炉暖茶第 8 楼2025/05/31 11:29:04

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

发呆

发呆的仓鼠第 9 楼2025/06/01 02:45:15

上周刚好踩了这个坑，cookies().set() + redirect() 在 Server Component 不兼容，改用 Server Action。欢迎交流讨论。

无所

无所谓第 10 楼2025/06/02 02:05:38

这个思路很巧妙，hydration mismatch 一般是服务端客户端渲染不一致，加 suppressHydrationWarning 试试。欢迎私信深入交流。

栈溢

栈溢出幸存者第 11 楼2025/06/03 18:36:03

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

吃瓜

吃瓜群众第 12 楼2025/06/04 04:13:38

反对一下，我的测试结果不是这样：Vercel 环境变量改了要重新部署才生效，NEXT_PUBLIC_ 变量尤其如此。期待更多实战经验分享。

打工

打工人之光第 13 楼2025/06/08 09:24:08

有个更优的方案：useSession() 返回 null 检查 SessionProvider 是否包裹了组件。有疑问可以继续问。

Bug猎人第 14 楼2025/06/08 10:26:46

revalidatePath 路径要含 locale 前缀，如 /zh/forum/thread/xxx。

云中

云中漫步第 15 楼2025/06/17 10:33:21

结合我最近的项目经验：revalidatePath 路径要含 locale 前缀，如 /zh/forum/thread/xxx。希望对你有帮助。

Stack Overflow copy手第 16 楼2025/06/18 05:08:19

我做了类似的对比实验：Auth.js JWT 不更新是因为没处理 trigger === 'update'，要加 useSession().update()。

差不

差不多第 17 楼2025/06/27 21:09:40

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

接口

接口焊接工第 18 楼2025/06/28 23:54:11

有个相关问题想请教：Vercel 环境变量改了要重新部署才生效，NEXT_PUBLIC_ 变量尤其如此。后续有新发现再来更新。

赏月

赏月的灰狼第 19 楼2025/07/07 00:54:02

有个细节值得注意：Tailwind v4 升级后 @tailwind 指令改为 @import 'tailwindcss'。仅供参考，具体还是要看你的场景。

干货

干货搬运工第 20 楼2025/07/09 15:55:40

我的结论恰恰相反：Tailwind v4 升级后 @tailwind 指令改为 @import 'tailwindcss'。细节可以再展开讨论。

巡山

巡山的狐狸第 21 楼2025/07/09 22:32:09

我调研过这块，cookies().set() + redirect() 在 Server Component 不兼容，改用 Server Action。如果有更好的方案求分享。