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

[Yedidya10]

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.

[sai6855]

I couldn't reproduce the issue. It's working fine on using usePathname hook. You can find the working code below. Please send a github repo which reproduces the issue you described

https://github.com/sai6855/material-ui/blob/examples-next-pages/examples/material-ui-nextjs-pages-router-ts/src/Link.tsx

[Yedidya10]

I come across this in the repo:
https://github.com/Yedidya10/sharesphere

[sai6855]

@Yedidya10 thanks for repo, please add steps for how to reproduce the issue

[Yedidya10]

@Yedidya10 thanks for repo, please add steps for how to reproduce the issue

For sure.

1. Comment out the code snippet in: src\app\api\auth\[...nextauth]\route.ts page

GoogleProvider({
     clientId: getCredentials('GOOGLE').clientId,
     clientSecret: getCredentials('GOOGLE').clientSecret,
   }),

2. Please create and add to the .env file:

NODE_ENV=development
NEXTAUTH_URL=http://127.0.0.1:3000
NEXTAUTH_SECRET=my_ultra_secure_nextauth_secret
MONGODB_URI_LOCAL=mongodb://127.0.0.1:27017/share_sphere

3. Then, run a command: npm run dev

4. Open the browser at http://127.0.0.1:3000/

And the errors will come up

[mj12albert]

Is it really because of usePathname?

I have opened a PR to update the Link component example for Next.js 13 but the only notable change is related to the child <a> and legacyBehavior prop: vercel/next.js#36436