chakra-uiでNext.jsのLinkを利用するとき

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>

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を配置する場合は注意が必要ですねー。