Next.js 13中使用styled-jsx渲染遇服务端组件报错问题咨询

核心原因 #

Next.js 13的App Router目录下，所有组件默认都是Server Component。虽然styled-jsx官方宣称支持服务端渲染，但它的内部实现依赖了客户端环境的相关API（比如DOM操作逻辑），无法在无客户端上下文的Server Component中运行，这就是触发报错的根本原因。

可行解决方案 #

• 在使用styled-jsx的组件文件最顶部添加指令：'use client'，将组件标记为Client Component。这样既可以正常使用styled-jsx的样式能力，也不会丢失它的服务端渲染特性——服务端依然会生成对应的样式字符串，客户端负责完成样式的挂载与激活。

对官方文档的补充说明 #

官方提到的「支持服务端渲染」，指的是styled-jsx能在服务端渲染阶段生成并注入样式代码，而非可以直接在Next.js的Server Component中导入运行。Next.js的Server Component对客户端相关模块有明确的导入限制，这是框架层面的规则，和styled-jsx本身的SSR能力并不冲突。

内容的提问来源于stack exchange，提问作者Daniil Rõbnikov