Using material-ui Link with next.js Link

Link.tsx

import React, { forwardRef } from 'react';
import {
  Link as MuiLink,
  LinkProps as MuiLinkProps
} from '@material-ui/core';
import NextLink, { LinkProps as NextLinkProps } from 'next/link';

export type LinkProps = NextLinkProps & MuiLinkProps;

const LinkComponent = forwardRef<HTMLAnchorElement, LinkProps>(({
  href,
  as,
  replace,
  scroll,
  shallow,
  passHref,
  prefetch,
  ...props
}, ref) => (
  <NextLink
    href={href}
    as={as}
    replace={replace}
    scroll={scroll}
    shallow={shallow}
    passHref={passHref}
    prefetch={prefetch}
  >
    <a ref={ref} {...props} />
  </NextLink>
));

const Link: React.FC<LinkProps> = props => <MuiLink {...props} component={LinkComponent} />;

export default Link;