emotion SSR 적용 질문있습니다!

안녕하세요 현영님!

styled-components 대신에 emotion 사용해서 실습하고 있는데, emotion 공식문서에서 10버전 이상부터는 next에서 SSR 적용이 된다고 나와있는데요. (현재 11버전 사용중입니다.)

그렇다면, pages/_document.js의 코드에서

import React from "react";
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()} */}
          </>
        )
      };
    } catch (err) {
      console.error(err);
    } finally {
      // sheet.seal();
    }
  }

  render() {
    return (
      <Html>
        <Head />
        <body>
          <script src="https://polyfill.io/v3/polyfill.min.js?features=default%2Ces2015%2Ces2016%2Ces2017%2Ces2018%2Ces2019" />
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

styled-components 관련 부분만 제외하고 입력하면 될까요?

인프런 커뮤니티 질문&답변