Next.jsのLink componentとchakraUIのLink componentを利用するときは hrefPass
を利用します。
import NextLink from 'next/link';
import { Link } from '@chakra-ui/react';
<NextLink href="/home" passHref>
<Link>Link</Link>
</NextLink>
// chakra.a でも同じ
<NextLink href="/home" passHref>
<chakra.a>Link</chakra.a>
</NextLink>
passHrefがない場合、htmlは以下のようになりhrefが出力されていない状態になります。この場合、クリック時は問題なく動作しますが、Macでリンク先を別タブで開きたい場合の「command+click」が動作しなくなります。
<a class="chakra-link css-f4h6uy">Link</a>
hrefPassを利用した場合は hrefが付きます。
<a class="chakra-link css-f4h6uy" href="/home">Link</a>
もちろん、手動でherfを指定してもよい。ただし間違えたりするのでおすすめではない。
<NextLink href="/home" passHref>
<Link href="/home">Link</Link>
</NextLink>
hrefPass
とはhttps://nextjs.org/docs/api-reference/next/link
passHref - Forces Link to send the href property to its child. Defaults to false
Linkのタグの子供のcomponentに強制的にhrefを渡すしくみのようです。
ソースコードを見てみるとこの辺りで強制的にhrefを変えているのが見て取れます。
https://github.com/vercel/next.js/blob/master/packages/next/client/link.tsx#L320
通常のaタグを利用する場合は意識しないので、Linkタグの子供に別のcomponentを配置する場合は注意が必要ですねー。