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

Yedidya10 commented 1 year ago

Duplicates

[x] I have searched the existing issues

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 commented 1 year ago

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 commented 1 year ago

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

sai6855 commented 1 year ago

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

Yedidya10 commented 1 year ago

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

For sure.

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

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

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

Then, run a command: npm run dev
Open the browser at http://127.0.0.1:3000/

And the errors will come up

mj12albert commented 1 year ago

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: https://github.com/vercel/next.js/pull/36436

mui / material-ui