styled-components with Nextjs (Typescript)

0. 사용환경

create-next-app 으로 만든 애플리케이션 (typescript)

package.json

"dependencies": {
    "next": "9.5.3",
    "react": "^16.13.0",
    "react-dom": "^16.13.0",
    "styled-components": "^5.0.0"
 },
  "devDependencies": {
    "@types/node": "12.0.12",
    "@types/react": "16.8.23",
    "@types/react-dom": "16.8.4",
    "@types/styled-components": "5.0.1",
    "babel-plugin-styled-components": "^1.10.0",
    "typescript": "4.0"
  },

 

1. 바벨설정

.babelrc

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

 

2. _document 설정

_document.tsx

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

export default 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()}
          </>
        ),
      }
    } finally {
      sheet.seal()
    }
  }
}

 

 

틀린부분 지적과 조언은 언제나 환영입니다. (_ _)