Next.js - styled-jsx

Next.js의 기본적으로 내장되어 있는 styled-jsx는 따로 노드 모듈을 설치할 필요없이 바로 사용할 수 있다.

 

제일 많이 사용하고 있는 styled-component와 공통점이 굉장히 많아 둘 다 사용하는데 큰 어려움이 없다.

 

다만 styled-jsx을 사용할 때의 render 방식과 styled-component의 Nesting 기능은 지원히지 않는다는 단점이 있다.

 

import css from "styled-jsx/css";

// 스타일을 적용할 객체 생성
const style = css`
  .container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
  }
  .first-div {
    width: 200px;
    height: 200px;
    background-color: red;
  }
  .second-div {
    width: 200px;
    height: 200px;
    background-color: green;
  }
  .third-div {
    width: 200px;
    height: 200px;
    background-color: blue;
  }
`

const Home = () => {
  return (
    <>
      <div className="container">
        <div className="first-div">first</div>
        <div className="second-div">second</div>
        <div className="third-div">third</div>
      </div>
      <style jsx>{style}</style>
    </>
  );
};

export default Home;

예제 코드의 대한 결과

기본적인 styled-jsx의 사용 방법은 먼저 기본적으로 "styled-jsx/css"의 대한 import를 해준다.

 

그리고 style을 적용할 객체를 만들어 사용하고 싶은 스타일을 작성한다.

 

랜더링을 할 때 <>와 </>을 return 안에 꼭! 추가를 해주고 html Element를 사용한다.

 

마지막으로 스타일을 작성한 객체를 <style jsx>{style}</style>코드 안에 넣어주고 마무리 한다. 

 

개별적인 컴포넌트의 대한 스타일링이나 컴포넌트화 시켜서 스타일링을 할 수 없다는 점이 좀 아쉽다고 생각한다.

 

아마 이 점은 추후 나중에 버전이 업데이트 되면서 개선되지 않을까 라는 생각이 든다.