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

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> 
  ...
);

参考

https://www.marorika.com/entry/rel-noopener-noreferrer

https://stackoverflow.com/questions/66226576/using-the-material-ui-link-component-with-the-next-js-link-component

下記に参考書をまとめておきます。

りーほー
りーほー

JavaScriptを基礎からしっかり学びたい方におすすめ!

りーほー
りーほー

JavaScriptを基礎から応用までガッツリ学びたい方におすすめ!

りーほー
りーほー

Reactの概念や仕組みを把握し、開発で使えるReactを学びたい方にオススメ!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする


reCaptcha の認証期間が終了しました。ページを再読み込みしてください。

目次