Next.js Link컴포넌트에 className 적용하기

Next.js에서는 Client-side navigation을 지원하기 위해서 Link 컴포넌트를 제공한다. 그런데 여기다가 className을 적용할때는 그냥 a태그를 내부에 넣고 적용해주면된다. 

 

// <Link> is merely a decorator (higher-order component). It only has a href attribute.

<Link href={`${href}`}>
    <a className="block w-full h-full flex items-center justify-center ">{children}</a>
</Link>

// 실제로 그려지는 것 
<a className="block w-full h-full flex items-center justify-center " href={`${href}`}>{children}</a>

Link안에 a태그가 없으면 Link컴포넌트가 알아서 감싸주는것 같고, a 태그가 있으면 그걸 그대로 사용하는 것 같다.