Use NextJs Link with Material UI Link

NextJs + MUI link

Both NextJs and MUI Link component creates an HTML anchor (a) tag when rendering in the browser. So we if we don’t use it correctly we will have a nested a tag in HTML which is not sematically correct.

This is how we should use it.

Import both components from corresponding packages.

// MUI Link
import { Link as MuiLink } from ‘@mui/material’;
// or use default export
// import MuiLink from '@mui/material/Link';

// Next link
import NextLink from 'next/link';

Usage:
Pass the NextLink to the component prop of MUILink

<MuiLink component={NextLink} href="/home">
   go to home page
</MuiLink>

The rendered HTML will look like this

Generated HTML

Happy coding 🍺