[Next.js] 새로운 탭(창) 여는 법 - Version 13

Next.js에서 새 탭을 열기 위해 Link 컴포넌트를 사용할 수 있습니다. 다음은 Link 컴포넌트를 사용하여 새 탭에서 새로운 페이지를 열고 싶을 때의 예시 코드입니다. 먼저, 다음과 같이 Link 컴포넌트를 import 해야 합니다:

Next.js new tab

import Link from 'next/link';

그런 다음 Link 컴포넌트를 사용하여 새 탭에서 열고자 하는 페이지를 링크할 수 있습니다. 아래는 예시 코드입니다:

Version 13

import Link from 'next/link';

function MyComponent() {
  return (
    <div>
      <p>다음 링크를 클릭하여 새 탭에서 페이지를 열어보세요:</p>
      <Link href="/새로운페이지" target="_blank">
        <a>새로운 페이지</a>
      </Link>
    </div>
  );
}

export default MyComponent;

위의 코드에서 target="_blank" 속성은 링크를 클릭했을 때 새 탭에서 해당 페이지를 열도록 합니다. 이렇게 하면 사용자가 "새로운 페이지" 링크를 클릭할 때 해당 페이지가 현재 탭이 아닌 새로운 탭에서 열립니다.

 

Version 12 이하

import Link from 'next/link';

function MyComponent() {
  return (
    <div>
         <Link href="/document/terms">
         	 <a target="_blank">Link</a>
        </Link>
    </div>
  );
}

export default MyComponent;