跳到主内容

Tailwind v4 升级后样式全部失效

栈溢出幸存者789 浏览
栈溢
Next.js 15 中 next/dynamic + ssr:false 在 Server Component 中不允许。解决:创建一个 'use client' 的包装组件,在包装组件中用 next/dynamic + ssr:false,然后在 Server Component 中导入这个包装组件。

Zod refine 校验不触发,检查:① refine 是否在 schema 末尾 ② 是否用了 safeParse(parse 会抛错) ③ refine 的 path 是否正确指向字段 ④ 异步 refine 用 superRefine + async。

Next.js middleware 中 pathname 精确匹配失效,因为 intl 中间件处理后 pathname 含 locale 前缀(如 /zh/dashboard)。用 pathname.includes() 或 getLocaleFromPathname() 而非 pathname === '/dashboard'。

Server Action 提交后不跳转,可能是用了 router.push 而非 window.location.href。Next.js 15 + next-intl 的 router.push 在 startTransition 内会被 toast 的状态更新中断。解决:用 window.location.href 硬导航。

React Server Component 中使用 useState 报错,因为 Server Component 不能用 hooks。解决:① 把需要状态的组件拆成 Client Component(加 'use client') ② 父组件保持 Server Component 做数据获取,子组件 Client 做交互。
查看历史

8 回复

  1. 刚刚
    刚刚好第 2 楼
    补充一个边界情况:revalidatePath 路径要含 locale 前缀,如 /zh/forum/thread/xxx。这只是个人经验,不一定通用。
  2. 苏晚
    苏晚晴第 3 楼
    有个更优的方案:Prisma $queryRaw 的 camelCase 列名必须加双引号,这是个经典坑。
  3. 星辰
    星辰大海第 4 楼
    不同场景下结论可能不同:cookies().set() + redirect() 在 Server Component 不兼容,改用 Server Action。后续有新发现再来更新。
  4. DI
    Diego Ramos第 5 楼
    反对一下,我的测试结果不是这样:Tailwind v4 升级后 @tailwind 指令改为 @import 'tailwindcss'。欢迎交流讨论。
  5. JA
    Jack Harrington第 6 楼
    结合我最近的项目经验:middleware 里 pathname 含 locale 前缀,用 includes() 不要用精确匹配。一起学习。
  6. FA
    Fatima Hassan第 7 楼
    我的看法略有不同:Vercel 环境变量改了要重新部署才生效,NEXT_PUBLIC_ 变量尤其如此。我也还在探索中。
  7. 迷路
    迷路的信鸽第 8 楼
    我的理解是:Prisma $queryRaw 的 camelCase 列名必须加双引号,这是个经典坑。效果因项目而异,建议实际测试。
  8. 不将
    不将就第 9 楼
    Prisma 连接池在 Serverless 环境设 connection_limit=1,加 ?pgbouncer=true。
登录后可回复
    数据正在加载中…