Error: Multiple children were passed to <Link> with `href` of `/about` but only one child is supported

nextJs 공부를 하면서 처음 만난 에러, 아주 간단한 에러이고 명확한 에러인데, 원인을 찾을 수 없었다.

나는 분명 자식을 <Link>태그 안에 <a> 태그 하나만 뒀는데? 

그래서 검색을 해보니 ✨<Link>태그 안에서 띄어쓰기가 되어있으면, 이 띄어쓰기도 자식으로 인식✨한다는 것이다. 그래도 내 코드엔 띄어쓰기가 없는데..? 하고 보니! 주석을 쓴다고 띄어쓰기가 하나 되어있었다. 아래에서 주석  {/* join() 은 한 배열을 다른 한 문자열로 바꾸는 방법*/} 를 보면 옆의 태그와 한칸 떨어져있는 것을 볼 수 있다. Link와 주석 사이에 띄어쓰기를 없애니 정상작동했다😅

import Link from "next/link"
import { useRouter } from "next/router";
import styles from "./NavBar.module.css";

export default function NavBar() {
    //Navbar를 생성 할 때 a 태그를 사용 하지 말 것 !
    //why ? a tag를 사용하면 페이지 전체가 reload
    //replacement : Link!
    //but! Link는 클래스나 스타일 적용이 되지 않음 > Link안에 태그 사용으로 대신

    const router = useRouter();
    console.log(router);
    return <nav>
        {/* <a href="/">Home</a>
        <a href="/about">About</a> */}
        <Link href="/">
            <a className={`${styles.link} ${router.pathname === "/" ? styles.active : ""}`}>Home</a>
        </Link>
        <Link href="/about"> {/* join() 은 한 배열을 다른 한 문자열로 바꾸는 방법*/}
            <a className={[
                styles.link, 
                router.pathname === "/about" ? styles.active : "",  
                ].join(" ")}>About</a>
        </Link>
    </nav>
}