[Next.js] Styles JSX

Next.js에서 .module.css 패턴을 통해서 style을 주는 방식 외에 다른 방법으로도 style을 줄 수 있다. 

 

Styles JSX

React에서나 다른 언어도 개발을 할 때 한번도 들어보지 못한 방식일 것이다. 

Styles JSX는 Next.js에서만 제공하는 고유한 방법이기 때문이다. 

import Link from "next/link";
import { useRouter } from "next/router";

const NavBar = () => {
  const router = useRouter();

  return (
    <nav>
      <Link href="/">
        <a>Home</a>
      </Link>
      <Link href="/about">
        <a>About</a>
      </Link>

      <style jsx>
        {`
          a {
            text-decoration: none;
          }
        `}
      </style>
    </nav>
  );
};

export default NavBar;

style 태그에 jsx 속성을 준 다음 {` `} 에 css를 넣어주면 된다. 

이렇게 넣어주면 .module.css 패턴을 사용할 때 보다 더 복잡한 방식의 클래스명이 할당된다. 

이를 통해 당연히 충돌도 방지되며, 굳이 클래스명을 지정해줄 필요가 없다는 것이 장점이다.

 

또한 부모 컴포넌트나 다른 컴포넌트에서 지정한 style이 있더라도 현재 컴포넌트에 존재하는 style jsx 태그만 적용이

된다.

 

import Link from "next/link";
import { useRouter } from "next/router";

const NavBar = () => {
  const router = useRouter();

  return (
    <nav>
      <Link href="/">
        <a className={router.pathname === "/" ? "active" : ""}>Home</a>
      </Link>
      <Link href="/about">
        <a className={router.pathname === "/about" ? "active" : ""}>About</a>
      </Link>

      <style jsx>
        {`
          a {
            text-decoration: none;
          }

          .active {
            color: red;
          }
        `}
      </style>
    </nav>
  );
};

export default NavBar;

특정 태그에만 속성을 주고 싶고, 조건이 있는 경우에도 "active" 처럼 할당해줄 수 있다.