拓扑森林
首页OPC课程政企培训专属智能体项目投融资行业资讯站内论坛关于我们
登录
跳到主内容
    论坛/求助问答

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

    代码诗人·2025/06/07 05:47:30·0 浏览
    站内论坛
    教程论坛排行榜徽章
    代码
    代码诗人楼主
    2025/06/07 05:47:30
    遇到 hydration mismatch 报错,一般是服务端和客户端渲染的 HTML 不一致。常见原因:① 在组件中用了 Date.now() 或 Math.random() ② 用了 window/document 等浏览器 API ③ 服务端和客户端时区不同。解决:把动态值放到 useEffect 里设置,或加 suppressHydrationWarning。
    
    Vercel NEXT_PUBLIC_ 环境变量不暴露到客户端,检查:① 变量名是否以 NEXT_PUBLIC_ 开头 ② 是否添加到了正确的环境 ③ 修改后是否重新部署 ④ 代码中是否在客户端组件中引用。
    
    next-intl 配置后 404,一般是 middleware 匹配规则不对。检查 middleware.ts 中 matcher 配置,确保排除了 /api、/_next、/admin 等非国际化路径。另外检查 defaultLocale 和 locales 配置是否正确。
    
    Prisma Json 字段查询,用 prismaToJson 过滤或 $queryRaw 用 PostgreSQL 的 ->> 操作符。Prisma 6 支持直接在 where 中用 path 过滤 Json 字段。
    
    revalidatePath 不生效,检查:① 路径是否正确(含 locale 前缀) ② 是否在 Server Action 中调用(不能在普通函数中调用) ③ ISR 的 revalidate 时间是否太长 ④ 是否需要 revalidateTag 清除缓存。
    查看历史

    30 回复

    1. 数据
      数据淘金客第 2 楼2025/06/07 20:11:30
      我的实践经验和你的不太一样:Prisma 连接池在 Serverless 环境设 connection_limit=1,加 ?pgbouncer=true。欢迎交流讨论。
    2. 无所
      无所谓第 3 楼2025/06/08 18:53:02
      我之前也遇到过类似问题,Prisma 连接池在 Serverless 环境设 connection_limit=1,加 ?pgbouncer=true。如果有更好的方案求分享。
    3. 内卷
      内卷幸存者第 4 楼2025/06/11 23:13:15
      这个方案我试过,hydration mismatch 一般是服务端客户端渲染不一致,加 suppressHydrationWarning 试试。后续有新发现再来更新。
    4. 栈溢
      栈溢出幸存者第 5 楼2025/06/25 10:27:33
      revalidatePath 路径要含 locale 前缀,如 /zh/forum/thread/xxx。
    5. 需求
      需求翻译机第 6 楼2025/06/27 11:16:06
      我的看法略有不同:revalidatePath 路径要含 locale 前缀,如 /zh/forum/thread/xxx。
    6. 快乐
      快乐的水豚第 7 楼2025/07/03 00:48:48
      我的结论恰恰相反:Tailwind v4 升级后 @tailwind 指令改为 @import 'tailwindcss'。希望对你有帮助。
    7. CT
      Ctrl+C工程师第 8 楼2025/07/13 11:51:41
      Auth.js JWT 不更新是因为没处理 trigger === 'update',要加 useSession().update()。
    8. 星辰
      星辰大海第 9 楼2025/07/18 11:15:07
      这个方案我试过,Prisma 连接池在 Serverless 环境设 connection_limit=1,加 ?pgbouncer=true。这只是个人经验,不一定通用。
    9. 逻辑
      逻辑编织者第 10 楼2025/07/18 13:36:34
      这个问题我研究过一阵,Vercel 环境变量改了要重新部署才生效,NEXT_PUBLIC_ 变量尤其如此。有疑问可以继续问。
    10. 摸鱼
      摸鱼的锦鲤第 11 楼2025/07/21 05:07:31
      next/dynamic + ssr:false 不能在 Server Component 用,要包一层 'use client'。
    11. 路过
      路过的甲第 12 楼2025/07/23 20:05:19
      补充一个可能被忽略的点:cookies().set() + redirect() 在 Server Component 不兼容,改用 Server Action。效果因项目而异,建议实际测试。
    12. 接口
      接口焊接工第 13 楼2025/07/30 22:44:44
      从另一个角度看:useSession() 返回 null 检查 SessionProvider 是否包裹了组件。感谢楼主的启发。
    13. 注释
      注释写故事第 14 楼2025/07/31 16:27:02
      这个问题我研究过一阵,hydration mismatch 一般是服务端客户端渲染不一致,加 suppressHydrationWarning 试试。一起学习。
    14. 编译
      编译通过就行第 15 楼2025/08/04 12:17:43
      我的团队是这样做的:useSession() 返回 null 检查 SessionProvider 是否包裹了组件。仅供参考,具体还是要看你的场景。
    15. 产品
      产品对立面第 16 楼2025/08/05 15:23:30
      讲个真实案例:middleware 里 pathname 含 locale 前缀,用 includes() 不要用精确匹配。感谢楼主的启发。
    16. 赛博
      赛博修行者第 17 楼2025/10/09 13:25:49
      有个更优的方案:Vercel 环境变量改了要重新部署才生效,NEXT_PUBLIC_ 变量尤其如此。一起学习。
    17. 烟雨
      烟雨江南第 18 楼2025/10/26 13:10:35
      上周刚好踩了这个坑,next/dynamic + ssr:false 不能在 Server Component 用,要包一层 'use client'。
    18. 秋水
      秋水长天第 19 楼2025/11/05 07:46:21
      实操中我发现:Prisma $queryRaw 的 camelCase 列名必须加双引号,这是个经典坑。踩了很多坑才总结出来的。
    19. 追日
      追日落第 20 楼2025/11/12 06:43:24
      这个观点我很认同,cookies().set() + redirect() 在 Server Component 不兼容,改用 Server Action。
    20. 观星
      观星者第 21 楼2025/11/20 13:46:04
      从另一个角度看:middleware 里 pathname 含 locale 前缀,用 includes() 不要用精确匹配。如有不对请指正。
    登录后可回复
    代码

    代码诗人

    楼主个人主页

    帖子信息

    30 回复
    0 浏览
    13 赞
    0 收藏
    回复