Next.jsとMUIのLinkコンポーネント両方をいい感じに組み合わせて使いたい

Next.jsとMUIでNext.jsの遷移機能を活かしつつMUIのデザインも取り入れたいときに、両方のLinkコンポーネントのラッパーを作ることで対処しています。

パラメータなどはさまざま考えられると思いますが、よく使う最小構成としては以下のかたちです。（わかりやすいように名前を変えてインポートしています）

import { Link as MuiLink } from '@mui/material'
import NextLink, { LinkProps } from 'next/link'
import React, { ReactNode } from 'react'

type Props = {
  linkProps: LinkProps
  children?: ReactNode
}

export const Link = (props: Props) => {
  return (
    <NextLink href={props.linkProps.href} passHref>
      <MuiLink>{props.children}</MuiLink>
    </NextLink>
  )
}

MUIのLinkをNext.jsのLinkでラップしています。ポイントはNext側にpassHref属性をつけることでしょうか。これがあることでhrefの参照先を内部のMUIのLinkへ渡すことができます。

また、外部リンクとして利用したい場合は以下のようにMuiLinkにtarget='_blank'をつけてあげれば大丈夫です。

本来、外部リンクの場合はNext.jsのLinkコンポーネントではなく単純に<a>タグを使うのですが、リンク情報を内側にパスしてあげればOK。これもpassHrefのおかげです。

- <MuiLink>{props.children}</MuiLink>
+ <MuiLink target='_blank' rel='noopener noreferrer'>{props.children}</MuiLink>

targetとrelはパラメータとして制御してあげてもよさそうです。