[Link] Improve integration with Next.js

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

Passing an URL object to the MUI button component, as in the code below, works without problems but you get the following error: Warning: Failed prop type: Invalid prop `href` of type `object` supplied to `ForwardRef(ButtonBase)`, expected `string`.

// index.js
import React from "react";
import Button from "@material-ui/core/Button";
import Link from "../src/Link";

export default function Index() {
  return (
    <div>
      <Button
        component={Link}
        href={{
          pathname: "/about",
          query: { name: "test" }
        }}
        naked
        variant="contained"
      >
        Link button with url object
      </Button>
    </div>
  );
}

Note: The imported Link component is the same as the one in the NextJS - Material UI integration example.

Expected Behavior 🤔

No error should appear.

Steps to Reproduce 🕹

CodeSandbox reproduction: https://codesandbox.io/s/next-materialui-objecturl-rmprr?file=/pages/index.js

Context 🔦

In the NextJS documentation I learned that we can use an URL object and it will get formatted automatically to create an URL string.

Using URL objects instead of strings has helped me to handle complex queries mutations easily and intuitively.

Your Environment 🌎

`npx @material-ui/envinfo`

  System:
    OS: Windows 10 10.0.17763
  Binaries:
    Node: 15.0.1 - C:\Program Files\nodejs\node.EXE
    Yarn: Not Found
    npm: 6.14.8 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: Not Found
    Edge: Not Found
  npmPackages:
    @material-ui/core: ^4.11.2 => 4.11.2
    @material-ui/icons: ^4.11.2 => 4.11.2
    @material-ui/lab: ^4.0.0-alpha.57 => 4.0.0-alpha.57
    @material-ui/styles:  4.11.2
    @material-ui/system:  4.11.2
    @material-ui/types:  5.1.0
    @material-ui/utils:  4.11.2
    @types/react:  17.0.0
    react: ^17.0.1 => 17.0.1
    react-dom: ^17.0.1 => 17.0.1

[kelvinsanchez15]

Yeah I would like it. Just to be clear, I would have to update both NextJS examples (with and without TypeScript), and replace the line of code in the ButtonBase.js file?

[kelvinsanchez15]

Perfect, it seems like the right option to me too. @oliviertassinari

I just did a JS version, the only thing I’m not totally sure about, are both NextLinkComposed.propTypes and Link.propTypes objects, so tell me if changes are need it there: https://codesandbox.io/s/next-materialui-objecturl-forked-7qk0b?file=/src/Link.js