How to use Next.js and Material-UI’s Link together

Next.js links and Material-UI links cannot normally be used together.
However, with a little ingenuity, they can be used together.

The following are the requirements for the Link component that we will create using Next.js and Material-UI’s Link.

  • Linking works
  • Next.js’s Link will work.
  • View with Material-UI’s Link design
  • Open in new tab

There are some blogs that show how to use Next.js’s Link and Material-UI’s Button together.


By wrapping Material-UI’s Link with Next.js’s Link, we can use Links together.

In this case, it is necessary to pass a passHref to the Next.js Link.
By having a passHref, Next.js’s Link will pass the href property to its children.
The child Material-UI Link will then receive the href property and create the link.

passHref – Forces Link to send the href property to its child. Defaults to false
import NextLink from "next/link";
import MuiLink from "@material-ui/core/Link";

<NextLink href="rul" passHref>

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

It is also recommended to add rel="noopener noreferrer" when opening the link in a new tab.

The following security benefits can be obtained.

  • Do not allow new tabs to access the original tab by setting rel attribute to noopener.
  • Do not pass the referrer’s link to the referee by setting rel attribute to noreferrer.

Make a component

Link is dependent on Next.js and Material-UI.
If you are concerned about dependencies, it is recommended to cut out the link as a component.

By cutting it out as a component, if there is a problem with each dependency, it can be solved by fixing only this component.

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={ || "_self"} rel="noopener noreferrer">

The Link component that I created can be used in the following way.
By combining the Next.js and Material-UI links into a component, the logic becomes very simple.

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


export const User: React.FC<UserProps> = (props) => (


  • URLをコピーしました!
  • URLをコピーしました!