Next.js & styled-components - 렌더링 이전에 스타일 적용하기

Notice

Recent Posts

Recent Comments

Link

즐겁게, 코드 v2

« 2024/11 »
일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

Tags more

Archives

Today

Total

관리 메뉴

즐겁게, 코드

Next.js & styled-components - 렌더링 이전에 스타일 적용하기 본문

🎨 프론트엔드/Next.js

Next.js & styled-components - 렌더링 이전에 스타일 적용하기

Chamming2 2021. 5. 29. 00:00

바벨 파일 세팅과 _document.tsx만 저렇게 주어진 템플릿대로 구성하면 ServerStyleSheet 설정을 적용할 수 있는데요, 이러면 서버에서 문서를 내려받을 때 스타일이 적용된 문서를 내려받음으로써 렌더링 이전에 styled-components를 통한 스타일이 적용되지 않는 문제를 방지할 수 있습니다.

처음 보면 어려울 수도 있고, 템플릿이 외워서 칠만큼 간단하지도 않은 만큼 이번 기회에 블로그에 메모해두려 합니다.

1. 의존성 패키지 설치

npm i styled-components babel-plugin-styled-components
npm i -D @types/styled-components

2. .babelrc 파일을 루트 폴더에 생성한 후, 다음과 같이 작성한다.

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

3. _document.tsx를 다음과 같이 작성한다.

// pages/_document.tsx
// 기존 document 파일과 역할은 동일하나, 서버에서 styled-components를 적용한 문서를 내려주게 된다.

import Document, { Html, Head, Main, NextScript, DocumentContext } from "next/document";
import { ServerStyleSheet } from "styled-components";

export default class MyDocument extends Document {
  static async getInitialProps(ctx: any) {
    const sheet = new ServerStyleSheet();
    const originalRenderPage = ctx.renderPage;

    try {
      ctx.renderPage = () =>
        originalRenderPage({
          enhanceApp: (App: any) => (props: any) => sheet.collectStyles(<App {...props} />),
        });

      const initialProps = await Document.getInitialProps(ctx);
      return {
        ...initialProps,
        styles: (
          <>
            {initialProps.styles}
            {sheet.getStyleElement()}
          </>
        ),
      };
    } finally {
      sheet.seal();
    }
  }

  // 여기부터는 문서 공통 정보를 다루는 기존 _document 파일의 역할과 동일합니다.
  render() {
    return (
      <Html>
        <Head>
          <body>
            <Main />
            <NextScript />
          </body>
        </Head>
      </Html>
    );
  }
}

🎯 적용 결과

좌 : ServerStyleSheet 적용 안했을때 / 우 : ServerStyleSheet 설정했을 때

이렇게 서버에서 문서를 내려받는 시점에 미리 styled-components를 통한 스타일을 적용할 수 있는 방법을 알아보았습니다. 😁

'🎨 프론트엔드 > Next.js' 카테고리의 다른 글

Incremental Static Generation이란? (0)	2021.06.20
Next.js의 _document와 _app에 대하여 (0)	2021.05.29
넥스트를 꾸며줘 : styled-jsx 활용하기 (0)	2021.02.23
서버 데이터를 속성으로 활용하기 (0)	2021.02.22
Next.js 에서 라우팅 사용하기 (0)	2021.02.22