Next.js의 Link 컴포넌트와 target="_blank" 속성 이해하기

 안녕하세요. 오늘은 Next.js가 제공해주는 Link 태그를 사용하다가 새탭에서 열고 싶을 때 어떻게 해야하는지 정리해보려고 합니다! 간단한 target="_blank" 추가만으로 가능하니 짧게 설명해보도록 하겠습니다.

 

 

 

🧚 Next.js의 Link 컴포넌트는 어떻게 동작할까?

 Next.js의 Link 컴포넌트는 내부적으로 HTML의 <a> 태그를 렌더링합니다. 이는 일반적인 웹 표준을 따르면서도 클라이언트 사이드 라우팅의 장점을 가져오기 위한 설계입니다.

import Link from 'next/link';

function MyComponent() {
  return (
    <Link href="/about">About 페이지로 이동</Link>
  );
}

 

위 코드는 결국 HTML에서 다음과 같이 렌더링됩니다.

<a href="/about">About 페이지로 이동</a>

 

 

 

 

🧚 새 탭에서 링크 열기: target="_blank" 속성

 링크를 클릭했을 때 새 탭에서 열리도록 해야한다면, HTML의 <a> 태그 속성인 target="_blank" 속성을 사용해야 합니다. Link 컴포넌트는 <a> 태그를 기반으로 하기 때문에, 이 속성을 직접 전달할 수 있습니다.

<Link href="https://example.com" target="_blank">
  외부 사이트로 이동 (새 탭에서 열림)
</Link>

 

 

 

 

 

🧚 보안 고려 사항: rel="noopener noreferrer"

 target="_blank"를 사용할 때는 보안 이슈가 발생할 수 있습니다. 새 탭에서 열린 페이지가 window.opener API를 통해 원래 페이지에 접근할 수 있기 때문입니다.이를 방지하기 위해 rel="noopener noreferrer" 속성을 함께 사용하는 것이 좋습니다.

<Link
  href="https://example.com"
  target="_blank"
  rel="noopener noreferrer"
>
  안전한 외부 링크
</Link>

 

 

 

 

🧚 결론

 Next.js의 Link 컴포넌트는 <a> 태그를 기반으로 하기 때문에 HTML의 표준 속성들을 그대로 사용할 수 있습니다. 새 탭에서 링크를 열고 싶다면 target="_blank" 속성을 추가하면 되며, 보안을 위해 rel="nooperner noreferrer" 속성을 함께 사용하는 것이 좋습니다. 이런 작은 디테일들이 사용자 경험을 향상시키는 데 큰 도움이 됩니다!!