Next.js 13+TypeScript未加'use client'报错，求原因解析

• Next.js 13 App Router 模式下，组件默认是Server Components（服务端渲染组件），这类组件运行在服务器端，无法访问浏览器环境的API，也不能依赖仅支持客户端运行的库。
• styled-components 是客户端优先的样式库：它需要在浏览器环境中动态生成样式并注入到DOM中，内部实现依赖React的客户端专属API（比如useId、useEffect等hooks）来处理样式的挂载与更新。
• 你编写的Label组件导入了LabelX——这是styled-components生成的客户端组件，当你在未标记为客户端组件的文件中使用它时，相当于在Server Component里引用了客户端专属代码，Next.js会直接抛出错误，因为Server Components不允许这种跨环境的依赖。

添加'use client'指令后，Next.js会将该组件标记为Client Components（客户端渲染组件），组件会在浏览器端运行，满足styled-components的运行环境要求，错误自然就消失了。

内容的提问来源于stack exchange，提问作者Rolanda