next.13 에서는 layout에서는 styled-component 쓰는게 불가능 한가

[sumi-0011]

bug code

import styled from 'styled-components'
import './globals.css'

export const metadata = {
title: 'GoaTani',
description: 'G.O.A.T Ohtani',
}

export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (

{children}

)
}

const Wrapper = styled.divheight: 59px; display: flex; align-items: center; justify-content: center; padding: 0px 18px;

스크린샷

[sumi-0011]

해결 방법

layout.tsx 파일의 최상단에 'use client'를 추가하여 해결

추가 버그

• The Next.js 'metadata' API is not allowed in a client component.ts(71008)
• client 컴포넌트에서는 서버 로직인 metadata를 허용하지 않아서 발생, 제거함으로써 문제 해결

export const metadata = {
    title: 'GoaTani',
    description: 'G.O.A.T Ohtani',
}

[sumi-0011]

Next.js 13에서 root layout은 _app, _document를 대체하는거라서 styled-component 자체를 사용하면 안될것 같다.

[sumi-0011]

근데 그러면 styled-component의 ThemeProvider은 어디에 감싸야 하는걸까요?

[sumi-0011]

참고

https://velog.io/@qqww08/Next-13-%EC%97%90%EC%84%9C%EC%9D%98-CSS-in-JS-with.-styled-components

[jeonbyeongmin]

root layout 은 _app, _document 파일을 대체하도록 되어 있어요.
만약 root layout 에 provider를 감싸고 싶을 때에는 해당 provider를 분리해서 그 파일에는 "use client"를 붙여주면 되는 것 같아요.
그리고 그 provider를 root layout에서 import하고 사용하면 될 것 같습니다!

아래 링크도 참고해보아요
styled-components/styled-components#3902