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

Before Next.js 13

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 '@mui/material';

// ...

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

From Next.js 13

See Shikyo’s answer for a solution that works with the reworked next/link component in Next.js 13.