styled-components 설정하기

npm i styled-components를 하고나서 react와는 다르게 처음에 설치하고 설정해야 하는 부분들이 존재한다.

npm i --save-dev babel-plugin-styled-components
npm i babe-preset-next

그 다음 최상단에 .babelrc 파일을 만들고

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

위와 같이 입력해준다.

그 다음 page폴더 안에 _document.js 파일을 만들어 준다.
tsx 파일로 만들면 계속 오류가 나서 일단 js파일로 만들어 주었다.

_document.js안에 다음 코드를 입력해준다

import Document 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()
    }
  }
}

일단 에러가 나오는 부분을 해결했다.