[Error] Warning : Props 'className' did not match Server: ' ' Client: ' '

회사에서 첫 업무로 Publishing 받아서 진행하려다 보니

CSS in Js를 CSS 말고 styled-components로 하는 게 익숙해서 라이브러리를 설치 했는 데 아래와 같이 오류가 발생했다.

어떻게 해결 해야 할까 찾아보던 중 아래 두 게시물을 참고해서 해결 했다.

Next js + Styled-Components 셋팅

Next js에서 styled-component를 이용하려면 몇 가지 설정이 필요하다. Next js와 styled-components 가 설치되어 있다고 가정한다. 문제점 첫 화면에서, css가 의도치 않게 적용되는 모습을 볼 수 있다. styled-c..

taenami.tistory.com

[Next.js] Warning : Props 'className' did not match Server: ' ' Client: ' '

문제상황 Warning : Props 'className' did not match Server: ' ' Client: ' ' Next.js 로 styled-components로 스타일을 적용한뒤에 난 오류! 이 오류는 Server 의 클래스와 Client의 클래스가 달..

rrecoder.tistory.com

오류가 발생한 원인

위처럼 오류가 발생하지 않더라도 첫 화면에서 CSS가 의도치 않게 적용되는 모습을 볼 수 있다.

이는 styled-componts는 CRS처럼 작동하기 때문에 SSR에 적용하려고 할 때

Server의 Class와 Client의 Class가 달라서 match가 되지 않았던 것이다.

Next.js의 첫 화면은 SSR(Server-Side Rendering)을 한 후 뒤에 부분적으로 CSR을 진행 하는 데

이때 서버와 클라이언트의 클래스가 달라서 생기는 오류이다.

실제로 element를 확인 해보면 class 이름이 서로 다른 것 볼 수 있다.

해결 과정

1. 터미널을 열고 babel-pluin-styled-components를 설치했다.

yarn add -D babel-plugin-styled-components

or 

npm i -D babel-plugin-styled-components

2. 해당 프로젝트 root 하단에 .babelrc 파일을 생성하고 아래 코드를 추가한다.

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

3. 이 과정이 참 애매해다.

위 블로그들에서는 pages 폴더 아래에 _document.js를 생성하고 아래 코드를 추가한다.

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

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

    // Step 2: Retrieve styles from components in the page
    const page = renderPage(App => props =>
      sheet.collectStyles(<App {...props} />)
    );

    // Step 3: Extract the styles as <style> tags
    const styleTags = sheet.getStyleElement();

    // Step 4: Pass styleTags as a prop
    return { ...page, styleTags };
  }

  render() {
    return (
      <HTML>
        <Head>
          {/* Step 5: Output the styles in the head  */}
          {this.props.styleTags}
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </HTML>
    );
  }
}

나는 이 과정을 진행하면 아래와 같이 Interval Server Error가 발생한다.

그래서 빼고 2번까지만 진행 했더니 잘 적용 되었다.

'더 알아보기 > 에러' 카테고리의 다른 글

[Error] Cannot find module 'react/jsx-runtime' (0)	2022.04.06
[Error] Module not found : Can't resolve "next/image"; (0)	2022.02.23
[Error] Parsing Error : Cannot find module 'next/babel' (0)	2022.02.17
[Error] kakao.init: App key must be provided (0)	2022.01.26
[Error] api 요청 시 200, 204 뜨는 이유 (0)	2022.01.13