[Next.js] JSX 사용하기

NextJS의 특이점 중 하나인 jsx 를 사용하여 표현해보고자 합니다.  표현 방법은 간단하게 style 태그 내의 jsx 를 사용하면 됩니다.

<style jsx>{`
        nav {
            background-color: tomato;
        }
        a {
            text-decoration: none;
        }
        .active {
            color: yellow;
        }

        `}
        </style>

위의 jsx 는 html에서 style 태그 내에 존재하는 항목처럼 사용이 가능하고 아래에 배치하여도 위의 태그 및 클래스명을 그대로 사용할 수 있습니다. 

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

export default function NavBars() {
    const router = useRouter();
    console.log(router);

    return <nav>
        <Link style={{color: "red"}} href="/">
        <a>
          Home
        </a>
            </Link>
        <Link href="/about">
        <a className={router.pathname === '/about' ? 'active' : ''}>
            About
        </a>
        </Link>
        <style jsx>{`
        nav {
            background-color: tomato;
        }
        a {
            text-decoration: none;
        }
        .active {
            color: yellow;
        }

        `}</style>
    </nav>;
}

링크: https://github.com/jyp90/nextjs-intro/commit/d05ddb03c6a1d250bdbe069087cf3d99686f5d5d

Style JSX · jyp90/nextjs-intro@d05ddb0