[Next.js] Link 컴포넌트에 속성 설정 방법(className, target, rel 등)

# Next.js의 Link 태그에 속성 설정 방법

Next.js 에서<Link> 태그는 새로고침없이 페이지를 이동하는 client-side navigation을  위해 사용된다.

 

만약 <Link> 컴포넌트에 className, target, rel 등의 속성을 주고 싶다면,

<Link> 컴포넌트에 직접 주는게 아니라, <Link> 태그 하위에 <a> 태그를 삽입하여 속성을 설정 주면 된다.

 

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>
  )
}

* 참고 : rel 속성으로 noopener noreferrer 를 설정해줘야 보안상 유리하다.

 

참고로 공식문서의 원문을 첨부한다.

If you need to add attributes like, for example, className, add it to the a tag, not to the Link tag. 

 

이를 활용해 현재 접속해 있는 경로의 Link 태그에 스타일을 부여하는 방법은 아래글 참고하자.

[Next.js] Link 라우팅 : 현재경로 active CSS 스타일링

 

---

!!!! Next.JS 13버전부터 변경 되었다!!!!

그냥 <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