概要

Next.js12までのLinkコンポーネントではNext.jsでの外部リンクおよびリダイレクトの記事にある通り、Linkコンポーネント配下にaタグの設定が必要でした。target="_blank"の設定もaタグで行えばよいという形になります。
ただ、Next.js13ではNext.js13からnext/linkのLinkコンポーネントが常にaタグをレンダリングするようになったので共有しますの記事の通り、Linkコンポーネント配下にaタグの設定が不要になりました。では、Next.js13のLinkコンポーネントでtarget="_blank"の設定をどう行えばよいかと言うのをメモ書きします。

対応方法

Next.js13では、How to open a link in a new Tab in NextJS?のstackoverflowの記事にある通り、Linkコンポーネントに直接target="_blank"が設定できるようになっています。

念のため、Linkコンポーネントにtarget="_blank"を設定した実装サンプルをのせておきます。

<Link href={`/sample/open_tab`} rel="noopener noreferrer" target="_blank">
  別タブリンクサンプル
</Link>