프론트엔드 개발

Next js + Styled-Components 셋팅 본문

Front-End/NextJs

Next js + Styled-Components 셋팅

태나미 2021. 7. 4. 13:48
Next js에서  styled-component를 이용하려면 몇 가지 설정이 필요하다.
Next js와 styled-components 가 설치되어 있다고 가정한다.

문제점

첫 화면에서, css가 의도치 않게 적용되는 모습을 볼 수 있다.

styled-components이 기존 csr처럼 작동되기 때문에 발생되는 문제인데, 이를 해결하려면 ssr을 적용을 해야 한다.

해결방법

1. babel-plugin-styled-components 설치

yarn add -D babel-plugin-styled-components
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>
    );
  }
}

 

출처:

https://github.com/vercel/next.js/blob/master/examples/with-styled-components/.babelrc

 

 

'Front-End > NextJs' 카테고리의 다른 글

Next Js + Typescript  (0) 2021.08.01
Nest js 11 릴리즈 내용 보기  (1) 2021.07.10
Next js 환경변수  (2) 2021.02.13
Pre-rendering  (0) 2021.02.06
routing  (0) 2021.02.06
'Front-End/NextJs' Related Articles more
Comments