[Next.js] Next.js styled-component 적용 문제 (_document.tsx)

Next.js로 개발중 리렌더링할 때 styled-component로 작성한 css가 적용되지 않은 채로 html 페이자가 렌더링 되는 현상을 겪었다. 이는 _document.tsx 파일을 커스텀하여 해결할 수 있었다.

 

첫번째로 styled-components의 서버측 className과 클라이언트측 className을 동일하게 유지되도록 하기 위해서 next.config.js를 수정해야된다. next.js 12.1버전 이상부터는 babel-plugin-styled-components를 사용하지 않아도 되고, 다음과 같은 코드만 next.config.js에 추가해주면 된다.

compiler: {
  styledComponents: true
},

두 번째로 _document.tsx 파일을 아래처럼 작성해 주면 된다.

import Document, {DocumentContext} from 'next/document'
import {ServerStyleSheet} from 'styled-components'

class MyDocument extends Document {
  static async getInitialProps(ctx: DocumentContext) {
    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 (error) {
      throw error
    } finally {
      sheet.seal()
    }
  }
}

export default MyDocument

 

 

출처
https://wonbeenna.github.io/blog/javaScript/next-styled-component