Using the Material UI Link component with the Next.JS Link Component

Question

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 props. At the same time, I need to use the Next.js Link component for linking between pages.

I am wondering, how do I use the two of them together so that I can get the linking benefits of the Next.js Link component along with the styling benefits of the MaterialUI link component.

Ideally, I'd like to create my own Link component that combines the two of them into my single component so that I can use it anywhere I need to within my project.

Any ideas?

Answer 1

You can wrap the Material-UI link with the Next.js one. This will provide the benefits of using both.

import NextLink from 'next/link'
import { Link as MUILink } from '@material-ui/core';

// ...

<NextLink href="/" passHref>
    <MUILink variant="body2">Your Link</MUILink>
</NextLink>

Answer 2

Link accepts a component prop that combines both properties. It works perfectly with react-router, might also work well with netxjs Link.

<Link component={NextjsLink}>Link Text</Link>

Here change the import name of the nextjs link.

Related Material-ui Documentation