跳到主内容

next-intl 中 t() 模板字符串拼接报错

Somchai Phanuwat557 浏览
SO
Somchai Phanuwat楼主
Auth.js session 中 role 字段缺失，检查 JWT callback 是否把 role 写入 token，session callback 是否把 token.role 写入 session.user.role。两步缺一不可。

Prisma @@map 是表名映射（模型 → 数据库表名），字段 @map 是列名映射。混淆会导致查询的表/列名不匹配。规则：模型 PascalCase + @@map('snake_case')，字段 camelCase（DB 用 snake_case 时加 @map）。

Next.js 15 中 next/dynamic + ssr:false 在 Server Component 中不允许。解决：创建一个 'use client' 的包装组件，在包装组件中用 next/dynamic + ssr:false，然后在 Server Component 中导入这个包装组件。

next-intl t() 模板字符串拼接报错，因为动态拼接翻译键不被支持。用显式 Record 映射替代 t(`${type}Opt`)，改为 const labels: Record<string, string> = { ... } 然后 labels[type]。

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

61 回复

  1. 数据
    数据淘金客第 2 楼
    有个相关问题想请教：middleware 里 pathname 含 locale 前缀，用 includes() 不要用精确匹配。一起学习。
  2. SI
    Siti Aminah第 3 楼
    我的看法略有不同：useSession() 返回 null 检查 SessionProvider 是否包裹了组件。后续有新发现再来更新。
  3. 苏晚
    苏晚晴第 4 楼
    有个细节值得注意：Vercel 环境变量改了要重新部署才生效，NEXT_PUBLIC_ 变量尤其如此。我也还在探索中。
  4. ET
    Ethan Brooks第 5 楼
    这个方案我试过，Prisma $queryRaw 的 camelCase 列名必须加双引号，这是个经典坑。有疑问可以继续问。
  5. RO
    Ronan Doyle第 6 楼
    讲个真实案例：useSession() 返回 null 检查 SessionProvider 是否包裹了组件。
  6. 发呆
    发呆的仓鼠第 7 楼
    我做了类似的对比实验：useSession() 返回 null 检查 SessionProvider 是否包裹了组件。欢迎私信深入交流。
  7. 小白
    小白第 8 楼
    这个思路很巧妙，Server Action 提交后不跳转，用 window.location.href 替代 router.push。后续有新发现再来更新。
  8. CH
    Chloe Bennett第 9 楼
    分享一下我的做法：Auth.js JWT 不更新是因为没处理 trigger === 'update'，要加 useSession().update()。后续有新发现再来更新。
  9. 云中
    云中漫步第 10 楼
    分享一下我的做法：cookies().set() + redirect() 在 Server Component 不兼容，改用 Server Action。这只是个人经验，不一定通用。
  10. NO
    Noor Abdallah第 11 楼
    从另一个角度看：middleware 里 pathname 含 locale 前缀，用 includes() 不要用精确匹配。仅供参考，具体还是要看你的场景。
  11. 雾里
    雾里看花第 12 楼
    这个方案我试过，middleware 里 pathname 含 locale 前缀，用 includes() 不要用精确匹配。仅供参考，具体还是要看你的场景。
  12. 会议
    会议逃生专家第 13 楼
    Tailwind v4 升级后 @tailwind 指令改为 @import 'tailwindcss'。
  13. 算法
    算法炼丹师第 14 楼
    结合我最近的项目经验：Tailwind v4 升级后 @tailwind 指令改为 @import 'tailwindcss'。这只是个人经验，不一定通用。
  14. 无所
    无所谓第 15 楼
    我调研过这块，Tailwind v4 升级后 @tailwind 指令改为 @import 'tailwindcss'。有疑问可以继续问。
  15. 键盘
    键盘敲击者第 16 楼
    hydration mismatch 一般是服务端客户端渲染不一致，加 suppressHydrationWarning 试试。
  16. 竹林
    竹林深处第 17 楼
    有个细节值得注意：Prisma $queryRaw 的 camelCase 列名必须加双引号，这是个经典坑。期待更多实战经验分享。
  17. KA
    Karim Nasser第 18 楼
    这个思路很巧妙，Server Action 提交后不跳转，用 window.location.href 替代 router.push。如果有更好的方案求分享。
  18. 逻辑
    逻辑编织者第 19 楼
    分享一下我的做法：middleware 里 pathname 含 locale 前缀，用 includes() 不要用精确匹配。
  19. 社恐
    社恐患者第 20 楼
    useSession() 返回 null 检查 SessionProvider 是否包裹了组件。
  20. JA
    Jack Harrington第 21 楼
    cookies().set() + redirect() 在 Server Component 不兼容，改用 Server Action。
登录后可回复
    数据正在加载中…