Next css 적용방법 모듈화 와 파일 그대로안에 css 넣는 방법

import React from 'react';
import Link from 'next/link';
import { useRouter } from 'next/router';
import S from "../styles/NavBer.module.css"


const NavBar = () => {
    const router = useRouter();
    return (
        <nav className={S.nav}>
            <Link className={`${S.link} ${router.pathname === "/" ? S.active : ""}`} href="/">
             Home
            </Link>
            <Link className={[
                S.link,
                router.pathname === "/about" ? S.active : "",].join(" ")}  href="/about">
                About
            </Link>
        </nav>
    );
};

export default NavBar;

첫번재 링크방법은 백틱을 이용한 여러개의 css 스타일을 넣는방법

두번째 링크는 배열로 만들어서 일렬로 넣은후 조인을 이용해 공백으로 하여 띄어쓰기를 넣는다

join()은 한 배열을 다른 한 문자열로 바꾸는 방법이다.

 

두번째방법

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


const NavBar = () => {
    const router = useRouter();
    return (
        <nav>
            <Link href="/" legacyBehavior>
             <a className={router.pathname === "/" ? "active" : ""}>Home</a>
            </Link>
            <Link legacyBehavior 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>
    );
};

export default NavBar;

style jxs 태그를 사용해서 직접 파일 안에서 작성하는법. scss문법은 안되는거같기도?