跳到主内容

Shadcn UI 组件在 Server Component 中报错

像素调配师0 浏览
像素
Vercel 环境变量不生效,检查三点:① 环境变量是否添加到了正确的环境(Production/Preview/Development)② NEXT_PUBLIC_ 前缀的变量需要重新部署才生效 ③ 修改环境变量后必须重新 deploy,不是自动生效。

Next.js 路由组 layout 中调用 auth() 报错,因为 layout 是所有子页面的公共外壳,async layout 会拖慢导航。解决:layout 保持同步,用客户端组件 + useSession() 读取 session 缓存。

Auth.js credentials 登录返回 null,检查:① authorize 函数是否正确返回 user 对象 ② 密码 bcrypt.compare 是否正确 ③ 用户状态是否 active ④ 是否触发了限流 ⑤ email 是否小写化匹配。
查看历史

39 回复

  1. 前端
    前端魔法师第 2 楼
    我的团队是这样做的:Tailwind v4 升级后 @tailwind 指令改为 @import 'tailwindcss'。
  2. 数据
    数据淘金客第 3 楼
    Prisma 连接池在 Serverless 环境设 connection_limit=1,加 ?pgbouncer=true。
  3. 电子
    电子古董第 4 楼
    讲个真实案例:middleware 里 pathname 含 locale 前缀,用 includes() 不要用精确匹配。
  4. 老张
    老张第 5 楼
    我的看法略有不同:Server Action 提交后不跳转,用 window.location.href 替代 router.push。期待更多实战经验分享。
  5. 栈溢
    栈溢出幸存者第 6 楼
    这个思路很巧妙,Vercel 环境变量改了要重新部署才生效,NEXT_PUBLIC_ 变量尤其如此。
  6. 需求
    需求翻译机第 7 楼
    讲个真实案例:cookies().set() + redirect() 在 Server Component 不兼容,改用 Server Action。
  7. 林间
    林间晨露第 8 楼
    hydration mismatch 一般是服务端客户端渲染不一致,加 suppressHydrationWarning 试试。
  8. 冬炉
    冬炉暖茶第 9 楼
    结合我最近的项目经验:hydration mismatch 一般是服务端客户端渲染不一致,加 suppressHydrationWarning 试试。感谢楼主的启发。
  9. BU
    Bug猎人第 10 楼
    说个反直觉的发现:Prisma 连接池在 Serverless 环境设 connection_limit=1,加 ?pgbouncer=true。欢迎私信深入交流。
  10. 竹林
    竹林深处第 11 楼
    useSession() 返回 null 检查 SessionProvider 是否包裹了组件。
  11. 掘洞
    掘洞的兔第 12 楼
    讲个真实案例:Prisma $queryRaw 的 camelCase 列名必须加双引号,这是个经典坑。希望少走弯路。
  12. 快乐
    快乐的水豚第 13 楼
    讲个真实案例:useSession() 返回 null 检查 SessionProvider 是否包裹了组件。我也还在探索中。
  13. 阿杰
    阿杰第 14 楼
    这个观点我很认同,middleware 里 pathname 含 locale 前缀,用 includes() 不要用精确匹配。后续有新发现再来更新。
  14. 路过
    路过的甲第 15 楼
    这个方案我试过,Auth.js JWT 不更新是因为没处理 trigger === 'update',要加 useSession().update()。共同进步。
  15. 慢慢
    慢慢来第 16 楼
    我做了类似的对比实验:cookies().set() + redirect() 在 Server Component 不兼容,改用 Server Action。如果有更好的方案求分享。
  16. 干货
    干货搬运工第 17 楼
    有个细节值得注意:revalidatePath 路径要含 locale 前缀,如 /zh/forum/thread/xxx。效果因项目而异,建议实际测试。
  17. 00
    007志愿者第 18 楼
    Prisma $queryRaw 的 camelCase 列名必须加双引号,这是个经典坑。
  18. 无所
    无所谓第 19 楼
    我之前也遇到过类似问题,Prisma 连接池在 Serverless 环境设 connection_limit=1,加 ?pgbouncer=true。
  19. 发呆
    发呆的仓鼠第 20 楼
    Tailwind v4 升级后 @tailwind 指令改为 @import 'tailwindcss'。
  20. 精神
    精神小伙第 21 楼
    说说我自己的经历:Prisma 连接池在 Serverless 环境设 connection_limit=1,加 ?pgbouncer=true。希望对你有帮助。
登录后可回复