NextJS Link 경고

Warning: components cannot be given refs

Warning: Function components cannot be given refs.

Link의 자식은 기본적으로 <a> 태그로 래핑되어야 한다.

자식에게 href를 주입해주기 때문이다.

<Link href="/about">     
    <a>
        <MyButton />
    </a>
</Link>

자식에 커스텀 컴포넌트를 사용하려면 fowardRef로 href를 주입해줘야 한다.

<Link href="/about" passHref>     
    <MyButton />
</Link>

https://stackoverflow.com/questions/66421459/warning-function-components-cannot-be-given-refs

https://nextjs.org/docs/api-reference/next/link#if-the-child-is-a-function-component