Next.js - Styled-Components
Next.js - Styled-Components

 

 

Next.js 프로젝트에서 Styled-Components를 사용해 CSS를 적용하면 로컬에서는 스타일에 전혀 문제가 없어 보였다. 로딩 시 워낙 빠르기 때문인 듯하다. 하지만 Vercel을 통해 배포 후 페이지에 접속해보면 첫 화면에 잠깐 CSS가 적용되지 HTML 요소들이 보이고 화면이 깜빡이고 나서 적용한 CSS 스타일로 돌아간다.

 

이 문제는 _documnets.js 파일에 styled-components SSR 설정을 안 해두면 styled-components로 작성된 CSS 코드는 SSR 적용이 안되에 HTML 로딩이 끝나고 JS 로딩이 완료될 때, 스타일이 적용되기 때문이다.

 

작성한 CSS 코드까지 SSR 적용을 하는 방법은 아래와 같다.

 

> npm i -D babel-plugin-styled-components

 

Next.js 루트 폴더 안에 해당 파일을 작성한다.

 

 

./.babelrc

{
  "presets": ["next/babel"],
  "plugins": [
    [
      "styled-components",
      {
        "ssr": true,
        "displayName": true,
        "preprocess": false
      }
    ]
  ]
}

 

./pages/_document.js

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>
    );
  }
}

 

이후 로딩이 잘 되는지 확인해본다.

저작자표시 비영리 변경금지