NextJS Pages Router에서의 Styled Components

NextJS에서 Styled Components를 사용할 때 문제가 발생했다. 

css 적용이 초기 렌더링때 바로 적용이 되지 않는 문제가 있었다. 

위 이미지에서 보이듯 글자의 CSS가 잠깐 적용되지 않는 문제가 있었고 해결하기 위해서 이것저것 찾아봤다.

 

App Router를 사용하는 경우라면 NextJS에서 제공하는 방법이 있어서 문제가 없지만 해당 문제가 발생한 것은 

옛날 프로젝트 환경이라서 Pages Router를 사용하고 있었다. 

 

또한 App Router로 마이그레이션할 시간이 따로 주어지지 않아서 어쩔 수 없이 현재 환경에서 해결을 해야했다. 

( 해결 방법은 제일 하단에 )

 

babel 설정 ( 실패 )

plugins: ["babel-plugin-styled-components"]

 

설정을 추가해주면 된다는 이야기가 제일 많았다. 

하지만 해당 플러그인을 사용해도 문제는 여전했다. 

 

next.config.js 설정 ( 실패 ) 

next.config.js에서 compiler에 styledComponents를 설정해주면 된다고 했다. 

const nextConfig = {
  // ...
  
  compiler: {
    styledComponents: true
  }
}

 

이 설정은 App Router 설정을 할 때 필요한 옵션이라 큰 기대를 하지 않고 설정을 해봤지만 

역시 설정이 제대로 되지 않았다... 

 

_document.js 수정

_document.js 에서 styled components 속성을 사용하면 해결할 수 있다는 내용을 stack over flow에서 발견했다. 

채택된 글은 아니라 안될거라 생각했는데 바로 해당 방법으로 해결했다. 

import Document from "next/document";
import { ServerStyleSheet } from "styled-components";

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 // ...
  }
}

 

이 글을 보는 사람들의 혼란을 방지하기 위해서 전체 코드를 먼저 작성했다. 

핵심을 getInitialProps 부분이다. 

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

 

해당 코드를 통해서 문제를 해결했다. 다행히 Styled components에서 ssr 환경에서 스타일을 적용할 수 있도록

지원하는 기능이 있어서 가능했다.