<body>
<ThemeProviderContainer theme={theme}>{children}</ThemeProviderContainer>
</body>이런식으로 ThemeProviderContainer로 감싸게 되면 적용하고자 하는 테마색은 잘 적용되지만,
렌더링 될 때 html 코드가 먼저 렌더링 되므로 잠시 스타일이 적용되지 않은 상태가 화면에 나타나게 된다.
Next.js에서는 이에 대한 해결책을 공식문서에서 이렇게 안내하고 있다.
공식문서 참고
'use client'
import React, { useState } from 'react'
import { useServerInsertedHTML } from 'next/navigation'
import { ServerStyleSheet, StyleSheetManager } from 'styled-components'
export default function StyledComponentsRegistry({
children,
}: {
children: React.ReactNode
}) {
// Only create stylesheet once with lazy initial state
// x-ref: https://reactjs.org/docs/hooks-reference.html#lazy-initial-state
const [styledComponentsStyleSheet] = useState(() => new ServerStyleSheet())
useServerInsertedHTML(() => {
const styles = styledComponentsStyleSheet.getStyleElement()
styledComponentsStyleSheet.instance.clearTag()
return <>{styles}</>
})
if (typeof window !== 'undefined') return <>{children}</>
return (
<StyleSheetManager sheet={styledComponentsStyleSheet.instance}>
{children}
</StyleSheetManager>
)
}
공식문서의 경로와 똑같이 lib이라는 폴더를 생성하여 registry라는 파일을 생성하여 위의 코드를 넣어주었다.
<body>
<StyledComponentsRegistry> // 감싸주기!
<ThemeProviderContainer theme={theme}>{children}</ThemeProviderContainer>
</StyledComponentsRegistry>
</body>이런식으로 코드를 작성해주니까 스타일이 뒤늦게 적용되는 문제를 해결할 수 있었다.
글이 많은 도움이 되었습니다, 감사합니다.