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

    Next.js 中 toast 和 router.push 冲突

    内卷幸存者·2025/03/08 02:23:36·0 浏览
    站内论坛
    教程论坛排行榜徽章
    内卷
    内卷幸存者楼主
    2025/03/08 02:23:36
    遇到 hydration mismatch 报错,一般是服务端和客户端渲染的 HTML 不一致。常见原因:① 在组件中用了 Date.now() 或 Math.random() ② 用了 window/document 等浏览器 API ③ 服务端和客户端时区不同。解决:把动态值放到 useEffect 里设置,或加 suppressHydrationWarning。
    
    Prisma $queryRaw 中 camelCase 列名必须加双引号:SELECT "newUserQuota" FROM users。不加双引号 PostgreSQL 会当作不区分大小写的标识符,找不到 camelCase 列。TS 类型声明也要与 SQL 别名一致。
    
    Prisma @@map 是表名映射(模型 → 数据库表名),字段 @map 是列名映射。混淆会导致查询的表/列名不匹配。规则:模型 PascalCase + @@map('snake_case'),字段 camelCase(DB 用 snake_case 时加 @map)。
    
    Next.js 动态 import 水合报错,可能是动态组件的 SSR 输出与客户端不一致。加 ssr: false 避免服务端渲染,或确保组件在 SSR 和 CSR 中输出一致。
    
    router.push 不更新 URL,Next.js 15 + next-intl 在 useSession 触发 re-render 时可能取消 router.push 的 startTransition。解决:用 window.location.href 硬导航(认证流程的例外允许裸路径)。
    查看历史

    58 回复

    1. 结网
      结网的蜘蛛第 2 楼2025/03/08 16:47:36
      不同场景下结论可能不同:middleware 里 pathname 含 locale 前缀,用 includes() 不要用精确匹配。
    2. 数据
      数据淘金客第 3 楼2025/03/11 00:45:20
      我做了类似的对比实验:Server Action 提交后不跳转,用 window.location.href 替代 router.push。
    3. 前端
      前端魔法师第 4 楼2025/03/13 02:11:21
      Tailwind v4 升级后 @tailwind 指令改为 @import 'tailwindcss'。
    4. 打工
      打工人之光第 5 楼2025/03/13 11:17:00
      分享一下我的做法:Tailwind v4 升级后 @tailwind 指令改为 @import 'tailwindcss'。踩了很多坑才总结出来的。
    5. 搬家
      搬家的蚂蚁第 6 楼2025/03/16 10:01:48
      我的实践经验和你的不太一样:revalidatePath 路径要含 locale 前缀,如 /zh/forum/thread/xxx。欢迎交流讨论。
    6. 老张
      老张第 7 楼2025/03/18 12:00:14
      结合我最近的项目经验:hydration mismatch 一般是服务端客户端渲染不一致,加 suppressHydrationWarning 试试。后续有新发现再来更新。
    7. 并发
      并发摆渡人第 8 楼2025/03/21 19:34:22
      我的项目里也用了这个方案,Prisma $queryRaw 的 camelCase 列名必须加双引号,这是个经典坑。这只是个人经验,不一定通用。
    8. 算法
      算法炼丹师第 9 楼2025/03/22 14:35:48
      Prisma $queryRaw 的 camelCase 列名必须加双引号,这是个经典坑。
    9. 冬炉
      冬炉暖茶第 10 楼2025/03/24 07:21:10
      补充一个可能被忽略的点:Auth.js JWT 不更新是因为没处理 trigger === 'update',要加 useSession().update()。
    10. 听风
      听风者第 11 楼2025/03/25 13:13:31
      Server Action 提交后不跳转,用 window.location.href 替代 router.push。
    11. 栈溢
      栈溢出幸存者第 12 楼2025/03/26 17:27:09
      我的团队是这样做的:Tailwind v4 升级后 @tailwind 指令改为 @import 'tailwindcss'。欢迎交流讨论。
    12. 吃瓜
      吃瓜群众第 13 楼2025/03/27 22:23:57
      这个观点我很认同,cookies().set() + redirect() 在 Server Component 不兼容,改用 Server Action。如果有更好的方案求分享。
    13. 电子
      电子古董第 14 楼2025/03/28 06:34:40
      revalidatePath 路径要含 locale 前缀,如 /zh/forum/thread/xxx。
    14. 打盹
      打盹的考拉第 15 楼2025/03/30 01:57:19
      上周刚好踩了这个坑,useSession() 返回 null 检查 SessionProvider 是否包裹了组件。一起学习。
    15. BU
      Bug猎人第 16 楼2025/04/05 06:36:39
      实操中我发现:Auth.js JWT 不更新是因为没处理 trigger === 'update',要加 useSession().update()。这只是个人经验,不一定通用。
    16. 数星
      数星星第 17 楼2025/04/07 02:53:55
      Prisma 连接池在 Serverless 环境设 connection_limit=1,加 ?pgbouncer=true。
    17. 发呆
      发呆的仓鼠第 18 楼2025/04/08 01:33:23
      我的团队是这样做的:cookies().set() + redirect() 在 Server Component 不兼容,改用 Server Action。
    18. 云中
      云中漫步第 19 楼2025/04/11 08:29:39
      我做了类似的对比实验:Server Action 提交后不跳转,用 window.location.href 替代 router.push。希望少走弯路。
    19. 路过
      路过的甲第 20 楼2025/04/16 07:08:21
      这个思路很巧妙,Auth.js JWT 不更新是因为没处理 trigger === 'update',要加 useSession().update()。期待更多实战经验分享。
    20. 阿杰
      阿杰第 21 楼2025/04/16 21:45:26
      不同场景下结论可能不同:useSession() 返回 null 检查 SessionProvider 是否包裹了组件。欢迎大家补充。
    登录后可回复
    内卷

    内卷幸存者

    楼主个人主页

    帖子信息

    58 回复
    0 浏览
    19 赞
    0 收藏
    回复