[examples] Updating the Link component example for the Next.js App Router

Duplicates

• I have searched the existing issues

Related page

https://github.com/mui/material-ui/blob/v5.14.7/examples/material-ui-nextjs-pages-router-ts/src/Link.tsx

Kind of issue

Missing information

Issue description

I thought that if I change the lines of code related to usePathname (due to the update in Next version 13) it will work,

...
import { usePathname } from 'next/navigation'
...

...
  const nextPathname = usePathname()
  const pathname = typeof href === 'string' ? href : href.pathname
  const className = clsx(classNameProps, {
    [activeClassName]: nextPathname === pathname && activeClassName,
  })
...

but I get 3 errors in the browser:

First 2 error messages:

Unhandled Runtime Error
Error: Hydration failed because the initial UI does not match what was rendered on the server.

Warning: Expected server HTML to contain a matching <a> in <a>.

See more info here: https://nextjs.org/docs/messages/react-hydration-error

Third error message:

Unhandled Runtime Error
Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.

Context 🔦

It would be great if someone could update the example to work in the latest version.