Next.js 에서 <Link>
태그는 새로고침없이 페이지를 이동하는 CSR을 위해 사용된다.
만약 <Link>
컴포넌트에 className, target, rel 등의 속성을 주고 싶다면,
<Link>
컴포넌트에 직접 주는게 아니라, <Link>
태그 하위에 태그를 삽입하여 속성을 설정 주면 된다.
import Link from 'next/link'
export default function LinkAttr() {
return (
<Link href="/myPage">
// Link 태그 내부에 a태그를 삽입하고, a태그에 속성을 설정한다.
<a className="myClass" target="_blank" rel="noopener noreferrer">
링크
</a>
</Link>
)
}
<Link>
태그 내부 속성으로 넣어주면, next 가 알아서 a태그로 렌더링 해준다.
import Link from 'next/link'
export default function LinkAttr() {
return (
<Link href="/myPage" className="myClass" target="_blank" rel="noopener noreferrer">
링크
</Link>
)
}
https://nextjs.org/docs/messages/invalid-new-link-with-extra-anchor