Next.js
Next.js 프로젝트에서 Styled-Components를 사용해 CSS를 적용하면 로컬에서는 문제 없이 보였습니다. 로딩이 빠르기 때문에 별 문제가 없는 것 같습니다. 하지만 Vercel을 통해 배포를 한 뒤에 페이지를 보면 화면이 깜빡이고 나서 적용한 CSS 스타일로 바뀌게 됩니다.
이 문제가 발생하는 이유는 _documnets.js에 styled-components SSR 설정을 안 했기 때문입니다. styled-components로 작성된 CSS 코드는 SSR 적용이 안되고 Html, Js 로딩이 완료될 때, 스타일이 적용되기 때문입니다.
작성한 CSS 코드까지 SSR 적용을 하는 방법은 아래와 같습니다.
- babel 플러그인 설치 및 설정
npm i -D babel-plugin-styled-components.babelrc에 아래와 같이 설정합니다.
{
"presets": ["next/babel"],
"plugins": [["styled-components", { "ssr": true }]]
}- _document.js 파일 생성
pages 폴더에 _document.js 파일을 생성합니다. next.js의 index.html head에 SSR스타일을 주입시켜 주는 것입니다.
import Document, { Html, Head, Main, NextScript } from "next/document";
import { ServerStyleSheet } from "styled-components";
export default class MyDocument extends Document {
static async getInitialProps(ctx) {
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()}
</>
),
};
} finally {
sheet.seal();
}
}
render() {
return (
<Html>
<Head>
<style />
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}위처럼 설정하고 난 뒤 다시 실행시키게 된다면 다음과 같이 정상적으로 styled-components가 잘 동작하는 것을 볼 수 있습니다.
노션 저장소는 🏠홈버튼 눌러주세요 !