Material-UI Next js Link Button

Question

I am working on a Server-Side-Rendering React Project, built with Next-JS and Material-UI. and i want to apply To Material Ui button -> the Link with Dynamic routes

how can i do this? i would apply React Router Link,but it is different...

my problem is that it has another properties required such as "as" property.

Answer 1

what worked for me (inspired from this comment in Github):

 <Link
     href={'/static/[dynamic]'}
     as={'/static/' + someJsString}
     passHref>
     <Button
        component="a">
        // other component ...
     </Button>
  </Link>

for version v10+:

<Link
    href={`/static/${someJsString}`}
    passHref>
    <Button
       component="a">
       // other component ...
    </Button>
</Link>

Answer 2

Edit

Starting next.js v10+ you don't need to specify as with Automatic `href` Resolution so the above code can be written as:

<Link
     href={'/static/' + someJsString}
     passHref>
     <Button
        component="a">
        // other component ...
     </Button>
  </Link>