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

React
スポンサーリンク
language

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

参考

aタグのrel=”noopener noreferrer”の意味とは?SEO的にどう?|まろりか
この記事ではaタグのrel属性のnoopenerとnoreferrerについて解説します。 SEOへの影響やWordPr
Using the Material UI Link component with the Next.JS Link Component
I am using Material-UI with Next.JS. I would like to use the Material-UI Link component so that I can access to the variant and other Material UI related API p...

この記事でわからないコードなどがあれば、書籍で勉強するのがおすすめです。
プログラミングの技術の移り変わりは早いので最新版の書籍を購入することをお勧めします。
中古本を買って勉強したけど、今は使われない技術だったということはよくあります。

javascript・Reactでおすすめの書籍をご紹介します。

りーほー
りーほー

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

りーほー
りーほー

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

りーほー
りーほー

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

タイトルとURLをコピーしました