如何在 NextJs13 中通过 SSR 使用样式组件？

Question

错误信息：

服务器错误类型错误：createContext 仅适用于客户端组件。在文件顶部添加“use client”指令以使用它。了解更多： https: //nextjs.org/docs/messages/context-in-server-component

import Link from "next/link";
import StyledHero from "./Hero.style";

const Hero = () => {
    return (
        <StyledHero>
            <h1>Stowarzyszenie Juz Lepiej</h1>
            <h2>Przybywam w celu:</h2>
            <Link about="Panel wolontariusza" href={"/volunteer"}>Uzyskania pomocy</Link>
            <Link about="Panel podopiecznego" href={"/mentee"}>Niesienia pomocy</Link>
            
        </StyledHero>
    )
};

export default Hero;

import styled from "styled-components";

const StyledHero = styled.main`
    width: 100%;
    height: auto;
    padding: 10em;

`
export default StyledHero;

使用样式组件时出现错误。如何在 Next13 中将 StyledComponents 与 SSR 结合使用？我发现的任何解决方案都不起作用。但是当我更改<StyledHero>为<main></main>之后，它就可以正常工作了。

我尝试在 .babelrc 中使用：

{
    "presets": [
      "next/babel"
    ],
    "plugins": [
     [
       "styled-components",
       {
          "ssr": true,
          "displayName": true,
          "preprocess": false
        }
     ]
    ]
}

我的package.json：

{
  "name": "mentalhealthcharity",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@next/font": "13.2.4",
    "@types/node": "18.15.11",
    "@types/react": "18.0.31",
    "@types/react-dom": "18.0.11",
    "@types/styled-components": "^5.1.26",
    "eslint": "8.37.0",
    "eslint-config-next": "13.2.4",
    "next": "13.2.4",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "styled-components": "^5.3.9",
    "typescript": "5.0.2",
    "zustand": "^4.3.6"
  },
  "devDependencies": {
    "babel-plugin-styled-components": "^2.0.7"
  }
}

Answer 1

将use client指令添加到带有样式组件的文件顶部。

"use client";

import styled from "styled-components";

const StyledHero = styled.main`
    width: 100%;
    height: auto;
    padding: 10em;

`
export default StyledHero;

参考：https://github.com/styled-components/styled-components/issues/3856#issuecomment-1304740381