`_document`에서 `styled-jsx` 사용 금지 | Next.js

출처 URL: https://nextjs.org/docs/messages/no-styled-jsx-in-document

Docs Errors_document에서 styled-jsx 사용 금지

`_document`에서 `styled-jsx` 사용 금지

pages/_document.js에서 styled-jsx를 사용하는 것을 방지하세요.

오류가 발생한 이유

Custom Document에서는 styled-jsx와 같은 커스텀 CSS를 사용할 수 없습니다.

해결 방법

모든 페이지에서 공유할 CSS가 필요하다면 Custom App 파일을 참고하거나 커스텀 레이아웃을 정의하세요.

예를 들어 styles.css라는 다음 스타일시트를 살펴보세요:

styles.css

    body {
      font-family:
        'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', 'Helvetica', 'Arial',
        sans-serif;
      padding: 20px 20px 60px;
      max-width: 680px;
      margin: 0 auto;
    }

아직 없다면 pages/_app.{js,tsx} 파일을 생성한 뒤 styles.css 파일을 import하세요.

pages/_app.js

    import '../styles.css'

    // This default export is required in a new `pages/_app.js` file.
    export default function MyApp({ Component, pageProps }) {
      return <Component {...pageProps} />
    }

이 스타일(styles.css)은 애플리케이션의 모든 페이지와 컴포넌트에 적용됩니다.

유용한 링크

보내기

_document에서 styled-jsx 사용 금지