Next.jsとMaterial-UIのLinkを併用する方法

2023年4月12日

Next.jsのLinkとMaterial-UIのLinkは通常併用できません。
しかし、ちょっとした工夫でこれらを併用できます。

Next.jsとMaterial-UIのLinkを用いて作るリンクのコンポーネントの要件は次のとおりです。

リンクができる
Next.jsのLinkが機能する
Material-UIのLinkのデザインで表示
新しいタブで開く

Next.jsのLinkとMaterial-UIのButtonを併用する方法が紹介されているブログがありますが、この記事ではNext.jsのLinkとMaterial-UIのLinkを併用した方法をご紹介します。

Next.jsとMaterial-UIのLinkを併用したサンプルコード

Material-UIのLink をNext.jsのLinkでラップすることでLinkを併用することができます。

その際、 Next.jsのLinkにはpassHrefを渡しておく必要があります。
passHref があることによって、 Next.jsのLinkはhrefプロパティを子に渡します。
そして、子であるMaterial-UIのLinkがhrefプロパティを受け取りリンクができます。

passHref – Forces Link to send the href property to its child. Defaults to false

passhref – hrefプロパティを子に強制的に渡します。デフォルトはfalseです。
https://nextjs.org/docs/api-reference/next/link

import NextLink from "next/link";
import MuiLink from "@material-ui/core/Link";

<NextLink href="rul" passHref>
		<MuiLink>リンク</MuiLink>
</NextLink>

// 新しいタブで開く
<NextLink href="url" passHref>
		<MuiLink target="_blank" rel="noopener noreferrer">
			リンク
		</MuiLink>
</NextLink>

また、新しいタブでリンクを開くときはrel="noopener noreferrer"をつけておくことをおすすめします。

セキュリティ的に以下のメリットを得られます。

rel属性にnoopenerを付与することで、新しいタブから元タブへの操作をさせない
rel属性にnoreferrerを付与することで、参照先に対して参照元のリンクを渡さない

コンポーネントとして切り出す

LinkはNext.jsやMaterial-UIに依存します。
依存関係を気にされる方は、コンポーネントとしてリンクを切り出しておくことをおすすめします。

コンポーネントとして切り出しておくことで、各依存関係に問題が出た場合にこのコンポーネントだけを修正したら解決します。

import React, { useEffect } from "react";
import NextLink, { LinkProps as NextLinkProps } from "next/link";
import MuiLink from "@material-ui/core/Link";

type LinkProps = {
	href: NextLinkProps["href"];
	target?: string;
	children?: React.ReactNode;
};
export const Link: React.FC<LinkProps> = (props) => (
	<NextLink href={props.href} passHref>
		<MuiLink target={props.target || "_self"} rel="noopener noreferrer">
			{props.children}
		</MuiLink>
	</NextLink>
);

自作したLinkコンポーネントは以下のように使うことができます。
Next.jsとMaterial-UIのLinkをコンポーネントにまとめることでロジック内はとてもシンプルになります。

import React, { useEffect } from "react";
import Link from "~/src/components/Link";

...

export const User: React.FC<UserProps> = (props) => (
	...
  <Link
    href={'/user/${props.user.id}'}
    target="_blank"
  >
   {props.user.name}
  </Link> 
  ...
);