Next.js에서 <Link/> 사용하고 classNames로 꾸미기

✔️ React

기존에 react를 쓸 때에는 react-router-dom의 Link를 사용하고 Link에 직접적으로 className을 줄 수 있었다

import { Link } from "react-router-dom";

<Link to="/" className={style.product_unit__link}>
	<div/>
</Link>

 

✔️ Next

Next에서는 우선 next/link에서 제공하는 Link를 사용해야 하고 to 대신에 href를 사용해야 한다.

또 직접적으로 className을 줄 수 없어 Link 밑에 하나 tag를 더 넣고 a 태그에 className으로 스타일링을 했다.

import Link from "next/link";

<Link href="/">
   <a className={style.product_unit__link}>
	<div/>
   </a>
</Link>