next js와 styled components

Tony·2021년 7월 29일

react

목록 보기

12/86

인프런 노드버드 강의를 듣고 스타일드 컴포넌트를 적용했었는데 초반엔 SSR을 위한 추가적인 설정을 하는 부분이 없었다.
그래서 막상 개인프로젝트에 적용을 해보니 제대로 되지 않아서 구글 검색을 해봤는데 document와 babel을 설정해주는 부분이 있었다.
그래서 강의를 찾아보니 후반부에 이것과 관련된 강의가 있어서 그것을 보고 일단 따라하고 부족한 내용은 구글 검색을 하면서 보충하려 한다.

문제점

평소 리액트에서 쓰던데로 styled-components를 nextjs에서 사용을 했는데 페이지 이탈 후 복귀 시 css가 적용이 안되는 문제가 있음

무엇이 다른가?

styled-components의 CSS가 서버사이드 렌더링에서 적용이 안되는 경우 있었다.

조치

next가 webpack, babel을 알아서 정해주는데 그것을 커스터 마이징을 할 수 있음

1. .babelrc 파일을 package.json과 같은 위치에 만들기

npm i babel-plugin-styled-components

{
  "presets": ["next/babel"],
  "plugins": [
    [
      "babel-plugin-styled-components", {
        "ssr":true,
        "displayName": true // 개발모드일때 브라우저에서 styled components의 클래스 이름을 쉽게 확인 할 수 있게 함
      }
    ]
  ]
}

// 좀 더 자세하게 알아보기

2. _document 에 추가 설정하기

getInitialProps, getStaticProps, getServerSideProps

static method로써 어떤 페이지에 추가된 비동기 함수 이다.
server side rendering을 가능하게 하고 initial data population을 할 수 있게 한다.
즉, 페이지를 이미 populated 된 data와 같이 보내줄 수 있다.
(SEO에서 특히 유용하다.)

getInitialProps는 공식문서에도 deprecated 된다고 한다.

getInitialProps는 document에서만 사용하도록 하자

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

export default class MyDocument extends Document {
  static async getInitialProps(ctx) {
    // Step 1: Create an instance of ServerStyleSheet
    const sheet = new ServerStyleSheet();
    const originalRenderpage = ctx.renderPage;

    try {
      // styled components SSR 하는 부분
      // Step 2: Retrieve styles from components in the page
      ctx.renderPage = () =>
        originalRenderpage({
          enhanceApp: (App) => (props) => sheet.collectStyles(<App {...props} />),
        });
      
      const initialProps = await Document.getInitialProps(ctx);
      return {
        ...initialProps,
        styles: (
          <>
            {initialProps.styles}
            {sheet.getStyleElement()}
          </>
        ),
      };
    } catch (error) {
      console.error(error);
    } finally {
      sheet.seal();
    }
  }

  render() {
    return (
      <Html lang="en">
        <Head>
          <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
        </Head>
        <body>
          <script src="https://polyfill.io/v3/polyfill.min.js?features=default%2Ces2015%2Ces2016%2Ces2017%2Ces2018%2Ces2019" />
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}