독립적 스타일링 style jsx

// NavBar.js

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

export default function 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를 추가 후 {``}내부에 css와 동일하게 작성 */}
      {/* 아래 style은 현재 컴포넌트에만 적용 */}
      {/* 다른 곳에서 바꾸려 해도 적용 안 됨 */}
      {/* 다른 곳의 다른 태그에도 적용 안 됨 */}
      <style jsx>
        {`          
          nav {
            background-color: tomato;
          }
          a {
            text-decoration: none;
          }
          .active {
            color: yellow;
          }
        `}
      </style>
    </nav>
  )
}

// index.js

import NavBar from "../components/NavBar";

export default function Home() {
  return (
    <div>
      <NavBar />
      {/* active를 줘도 여기선 적용 안 됨 */}
      <h1 className="active">Hello</h1>
      <style jsx>
        {/* 여기서 a 태그 바꾸려해도 NavBar에 적용 안 됨 */}
        {`
          a {
            color: white;
          }
        `}
      </style>
    </div>
  )
}

• NavBar.js에서 작성한 내용은 NavBar에서만 적용
• 다른 파일에서 같은 클래스를 사용해도 적용 안 됨(독립적인 className을 자동으로 생성하기 때문)
• 다른 파일에서 NavBar 컴포넌트에 스타일링 주려고 해도 안 됨