웹 개발/소소한 팁, 버그 해결

[Next.js 14] 새 탭에서 링크 열기 [React]

마라턍 2024. 3. 20. 02:44

<a> 태그에 target="_blank" 속성을 추가해준다.

<a href="https://google.com" rel="noopener noreferrer" target="_blank">Google</a>

 

<Link>도 마찬가지로 작성해주면 된다.

<Link href="https://google.com" rel="noopener noreferrer" target="_blank">Google</Link>

 

 

rel="noopener noreferrer" 속성에 관한 설명은 아래 링크가 잘 설명하고 있어 첨부한다.

 

링크에 noopener noreferrer 사용하는 이유

얼마전 공신력 있는 어떤 단체의 HTML 오픈 소스를 보다가 rel="noopener noreferrer"라는 코드를 처음 보았습니다. noopener와 noreferrer는 어떤 역할을 하고 일반적으로 필요한 코드일까요❓

joshua-dev-story.blogspot.com

 

끗~