CHOI BOO 블로그

[Nextjs] Nextjs와 styled-component 초기 렌더링 문제

2020.09.02
React
Nextjs
styled-components

Nextjs에서와 styled-component 같이 사용 하던 중
styled-component가 적용되기 전에 next 렌더링이 끝나버리는 현상으로 style이 제대로 안 먹혀버린다.

구글링 결과 -> pages/_document.js 파일에서 해당 코드를 적용하면 된다.

20-09-02 수정

개발 모드에서는 문제가 없었으나 배포 모드에서 문제가 발생

문제점: 초기에 버튼에 스타일이 문제 없었는데 버튼 클릭 시 스타일이 풀려버림

해결: .babelrc 추가 및 _document.js 코드 수정, polyfill 추가

polyfill은 사이트로 이동

참고 Link: https://polyfill.io/v3/url-builder/

페이지 중간에 Available Polyfills 부분을 체크해야 함
체크할 부분: default, es2015 ~ es2019 또는 필요한 부분 체크

그리고 위에 URL 즉, js URL를 복사하고 _document.js 파일 처럼 붙여넣기

// /front npm i babel-plugin-styled-components // /front/.babelrc { "presets": ["next/babel"], "plugins": [ [ "babel-plugin-styled-components", { "ssr": true, "displayName": true } ] ] } // pages/_document.js 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()} </> ), }; } 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> ); } }

참고 Link: https://dev.to/rsanchezp/next-js-and-styled-components-style-loading-issue-3i68

© CHOI BOO 2021