小编Jak*_*bos的帖子

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

错误信息:

服务器错误类型错误: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;


Run Code Online (Sandbox Code Playgroud)
import styled from "styled-components";

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

`
export default StyledHero;
Run Code Online (Sandbox Code Playgroud)

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

我尝试在 .babelrc 中使用:

{
    "presets": [ …
Run Code Online (Sandbox Code Playgroud)

javascript typescript server-side-rendering styled-components next.js

6
推荐指数
1
解决办法
5514
查看次数