Using Material-UI Button with Next.js Link

material-ui-next-js-button.js

import React from 'react'
import Link from 'next/link'
import Button from '@material-ui/core/Button'

const ButtonLink = ({ className, href, hrefAs, children, prefetch }) => (
  <Link href={href} as={hrefAs} prefetch>
    <a className={className}>
      {children}
    </a>
  </Link>
)

// https://material-ui.com/demos/buttons/#third-party-routing-library
const RenderButton = () => <Button component={ButtonLink} href={'/foo'}>bar</Button>

If you're here for a quick solution as of 2020-05-01:

1. Go straight to Material UI's Next.js example project on GitHub. There's a Link.js component that is well developed and flexible, and worked for me without having to make additional changes. Copy that and add it to your repo.

2. Once copied and imported (i.e. import Link from '../wherever/you/added/it/Link), here's how to use it:

• As a bog standard link:

    <Link href="/about">
      About
    </Link>
  

• As a button:

    <Button component={Link} href="/about">
      About
    </Button>
  

• As a list item:

    <ListItem button component={Link} href="/about">
      <ListItemText primary="About" />
    </ListItem>
  

https://github.com/mui-org/material-ui/blob/4b6cbf0/examples/nextjs-with-typescript/src/Link.tsx

@josephshambrook thank you so much

How can I change a Button component's properties like color and variant based on the active class here? A little stuck! :(

https://github.com/mui-org/material-ui/blob/4b6cbf0/examples/nextjs-with-typescript/src/Link.tsx

This is very useful , we can pass material UI styles to next.js link

@kenberkeley thanks for sharing.

How could I get rid of the hover underline in the button text when used this way?
<Button color="inherit" component={Link} href="/about"> About </Button>

@wguerram text-decoration: none?

@wguerram text-decoration: none?

Thanks @kenberkeley

<Button color="inherit" style={{ textDecoration: 'none' }} component={Link} href="/about">
About
</Button>

it worked so well.... thanks a lot man

nobody got the forwardRef error?
https://material-ui.com/guides/composition/#caveat-with-refs

Working code with forwardRef

import React , { forwardRef } from 'react'
import Link from 'next/link'
import Button from '@material-ui/core/Button'


const ButtonLink = forwardRef( ({ className, href, as, children, prefetch }, ref)=> (
  <Link href={href} as={as} prefetch ref={ref}>
    <a className={className}>
      {children}
    </a>
  </Link>
))

If you're here for a quick solution as of 2020-05-01:

1. Go straight to Material UI's Next.js example project on GitHub. There's a Link.js component that is well developed and flexible, and worked for me without having to make additional changes. Copy that and add it to your repo.
2. Once copied and imported (i.e. import Link from '../wherever/you/added/it/Link), here's how to use it:

• As a bog standard link:

    <Link href="/about">
      About
    </Link>
  

• As a button:

    <Button component={Link} href="/about">
      About
    </Button>
  

• As a list item:

    <ListItem button component={Link} href="/about">
      <ListItemText primary="About" />
    </ListItem>
  

Thanks man! <3

const ButtonLink = React.forwardRef(({ className, href, hrefAs, children, prefetch }, ref) => (


{children}


));

Thanks it worked in latest version.

Instead of overwriting textDecoration on buttons I guess set prop naked:true will prevent to interfer with styles of MuiLink on the components

I encountered the issue mentioned here Caveat with refs and fixed it by making the following changes to your code.

Hope it helps someone

const ButtonLink = React.forwardRef(({ className, href, hrefAs, children, prefetch }, ref) => (
    <Link href={href} as={hrefAs} prefetch ref={ref}>
        <a className={className}>
            {children}
        </a>
    </Link>
));

Yes! This fixed my ref warnings.

Thank you!

Next.js auto-prefetches automatically based on viewport. The prefetch attribute is no longer needed. More: https://err.sh/vercel/next.js/prefetch-true-deprecated

All the above examples are not using client-side routing.

Why so much discussion over it? Is there something wrong with this:

import RLink from 'next/link'
import {Link} from "@material-ui/core";

<RLink href={"/privacy"} passHref>
   <Link>
         Privacy Policy
   </Link>
</RLink>

You don't need to wrap Link with RLink.
RLink is alone enough to handle routing.

@ats1999 Yeah sure I did that for styling the subcomponets as I don't want to write custom css 😉
And another pros for adding link is that Link wraps the children inside <a> tag which is a requirement for me(for better SEO) and that's why you can see passHref prop in RLink tag.
Most importantly the purpose of this whole thread is to use Link with RLink so thats what I did and shared.

Ohh!

One more wrapper for both Link and Button components can be found here (typescript version) https://gist.github.com/kachar/028b6994eb6b160e2475c1bb03e33e6a

I had a ref error for my wrapped Material UI Button in a NextJS Link, which is what I was searching for when I found this thread. I didn't need any of the above, except wrapping my button with React.forwardRef

import { makeStyles } from "@material-ui/core/styles";
import { Button as MuiButton, ButtonProps } from "@material-ui/core";

const useStyles = makeStyles((theme) => ({
  root: {
    // your styles
  },
}));

interface Props extends ButtonProps {}

export const Button: React.FC<Props> = React.forwardRef((props, ref) => {
  const classes = useStyles();

  return <MuiButton ref={ref} className={classes.root} {...props} />;
});
Button.displayName = "Button";