Next.js에 Styled-component 적용하기

2020년 3월 26일
  • next.js
  • styled-component
  • ssr

styled-component 스타일이 적용되기전에 페이지가 렌더되는 문제점을 해결하기 위해 찾아본 방법입니다.


  1. module 설치를 먼저 진행한다.
yarn add styled-component babel-plugin-styled-component
  1. styled-component를 사용하려면 babel설정과 _document.js를 수정해야한다.

1) .babelrc 생성

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

2) pages폴더내 _document.js 생성

import Document, { Head, Main, NextScript } from 'next/document';
// Import styled components ServerStyleSheet
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  */}
          <meta charSet='utf-8' />
          <meta name='viewport' content='initial-scale=1.0, width=device-width' />
          {this.props.styleTags}
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </html>
    );
  }
}
  1. 위 설정이 끝난후 styled-component를 import해서 사용하면 된다.