React Server Component 中使用 useState 报错

需求

2025/05/18 02:08:55

Vercel NEXT_PUBLIC_ 环境变量不暴露到客户端，检查：① 变量名是否以 NEXT_PUBLIC_ 开头 ② 是否添加到了正确的环境 ③ 修改后是否重新部署 ④ 代码中是否在客户端组件中引用。

Vercel 部署后 CSS 丢失，常见原因：① Tailwind content 路径没包含组件目录 ② CSS 被 PurgeCSS 误删 ③ 生产构建时 PostCSS 配置问题 ④ 部分样式只在 Client Component 中生效但被服务端渲染时缺失。

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

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

前端

查看历史

6 回复

Chloe Bennett第 2 楼2025/05/18 16:32:55

我的看法略有不同：hydration mismatch 一般是服务端客户端渲染不一致，加 suppressHydrationWarning 试试。感谢楼主的启发。

听风

听风者第 3 楼2025/06/01 10:15:54

这个问题我研究过一阵，Prisma $queryRaw 的 camelCase 列名必须加双引号，这是个经典坑。希望对你有帮助。

冬炉

冬炉暖茶第 4 楼2025/06/18 05:51:16

有个细节值得注意：middleware 里 pathname 含 locale 前缀，用 includes() 不要用精确匹配。一起学习。

慢慢

慢慢来第 5 楼2025/07/04 11:11:14

从另一个角度看：next/dynamic + ssr:false 不能在 Server Component 用，要包一层 'use client'。

奔跑

奔跑的树懒第 6 楼2026/03/27 08:26:38

有个相关问题想请教：Prisma $queryRaw 的 camelCase 列名必须加双引号，这是个经典坑。

Miguel Santos第 7 楼2026/05/24 23:38:56

我调研过这块，revalidatePath 路径要含 locale 前缀，如 /zh/forum/thread/xxx。期待更多实战经验分享。

登录后可回复