Accessible Next.js Link with MUI Button styles

AccessibleLink.tsx

import { ButtonProps } from '@mui/material'
import NextLink from 'next/link'

/* Using the `linkComponent` prop of MUI's Button component we can give it
*  the expected behavior in terms of overall accessibility 
*  (screen readers, keyboard navigation etc.)
*
*  The can be done with MUI's Link component by using its `component` prop.
*  
*  This works in Next.js 13 and later, thanks to changes in NextLink's behavior.
*/
export default function AccessibleNavButton(props?: ButtonProps) {

  return (
    <Button
      {...props}
      LinkComponent={NextLink}
    >
      Navigation link
    </Button>
  )
}