Next.js 프로젝트로 styled-components를 사용 시, 리렌더나 새로고침을 하면 적용이 풀리는(?) 이슈가 있었다.
원인은 초기에 렌더링 될 때 SSR로 렌더링되어서 발생하는 문제라고 한다.
따라서 몇가지 설정을 해줘야 하는데...
아래의
.babelrc
플러그인 설정은 문제 해결방법과 무관하게, styled-components 설치 후 해야하는 설정을 제가 까먹고 설정을 안했던 부분이라 일단 기록했습니다.. 🥲 (이 부분은 무시하고 해결방법부터 보세요!!)
"plugins": [
[
"styled-components",
{
"ssr": true,
"displayName": true,
"preprocess": false
}
]
]
page/_document.tsx
파일을 새롭게 추가해 준다.
🙋🏻♂️ _document.tsx파일은 SSR렌더링 할 때만 호출된다!!
import Document, { DocumentContext } from "next/document";
import { ServerStyleSheet } from "styled-components";
class CustomDocument extends Document {
static async getInitialProps(ctx: DocumentContext) {
const sheet = new ServerStyleSheet();
const originalRenderPage = ctx.renderPage;
try {
ctx.renderPage = () =>
originalRenderPage({
enhanceApp: (App) => (props) =>
sheet.collectStyles(<App {...props} />),
});
const initialProps = await Document.getInitialProps(ctx);
return {
...initialProps,
styles: (
<>
{initialProps.styles}
{sheet.getStyleElement()}
</>
),
};
} catch (error) {
throw error;
} finally {
sheet.seal();
}
}
}
export default CustomDocument;
다음과 같이 파일 안에 해당 내용을 넣어서 저장하면 끝!