Guides: CSS-in-JS | Next.js

출처 URL: https://nextjs.org/docs/pages/guides/css-in-js

CSS-in-JS 라이브러리를 사용하는 방법

마지막 업데이트 2026년 2월 20일

예제

기존 CSS-in-JS 솔루션은 모두 사용할 수 있습니다. 가장 간단한 방법은 인라인 스타일입니다:

    function HiThere() {
      return <p style={{ color: 'red' }}>hi there</p>
    }

    export default HiThere

우리는 styled-jsx를 번들링해 격리된 범위의 CSS를 지원합니다. 목표는 Web Components와 유사한 “shadow CSS”를 지원하는 것이지만, 안타깝게도 서버 렌더링을 지원하지 않고 JS 전용입니다.

Styled Components와 같은 다른 인기 있는 CSS-in-JS 솔루션은 위의 예제를 참고하세요.

styled-jsx를 사용하는 컴포넌트는 다음과 같습니다:

    function HelloWorld() {
      return (
        <div>
          Hello world
          <p>scoped!</p>
          <style jsx>{`
            p {
              color: blue;
            }
            div {
              background: red;
            }
            @media (max-width: 600px) {
              div {
                background: blue;
              }
            }
          `}</style>
          <style global jsx>{`
            body {
              background: black;
            }
          `}</style>
        </div>
      )
    }

    export default HelloWorld

더 많은 예시는 styled-jsx 문서를 참고하세요.

JavaScript 비활성화

네. JavaScript를 비활성화해도 프로덕션 빌드(next start)에서는 CSS가 계속 로드됩니다. 개발 중에는 Fast Refresh를 통한 최상의 개발자 경험을 제공하기 위해 JavaScript 활성화가 필요합니다.