[examples] Next.js v13 use legacy behavior to fix example

[PetroSilenius]

Background 📚

Relates to #34898

In Next.js v13 Link component now renders a a tag and does not allow a tag as a child.

Next.js v13 release blog post
Next/link docs

This is a breaking change and currently causes errors in the next.js examples. Aim of this pull request is to fix those breaking changes and simplifying the examples could be done in a separate pull request which might need some more discussion.

Changes 🕹

• Adds support for legacyBehaviour prop in NextLinkComposed and Link components in the next.js examples repos

• Makes the legacyBehaviour prop true` by default so it's compatible with the current implementation

• I have followed (at least) the PR section of the contributing guide.

Fixes #34893

[mui-bot]

	Messages
📖	Netlify deploy preview: https://deploy-preview-34970--material-ui.netlify.app/

No bundle size changes

Generated by 🚫 dangerJS against d24f393

[mnajdova]

Thanks for the contribution, I was planning to tackle this today :) The changes look good, I've tested them locally. This seems to fix #34893, the server-side rendering looks good.

[mnajdova]

Tagging @siriwatknp for a final review.

[PetroSilenius]

Ah totally missed #34893 but good that I was able to help!

I wrote down some thoughts about a proper migration as well here but would require support for both v12 and v13

[mnajdova]

I wrote down some thoughts about a proper migration as well #34898 (comment) but would require support for both v12 and v13

Makes sense. At this moment we have only one next.js example that depends on latest (which at this moment is next.js 13). Maybe we will need to create two examples for both next.js 12 and 13.

[oliviertassinari]

at this moment we have only one next.js example that depends on latest

Speaking on dependency on latest, this looks like we should depend on latest, 18 was released some time ago 😁

material-ui/examples/nextjs-with-typescript-v4-migration/package.json

Line 24 in 55b0bad

"react": "^17.0.2",

From what I understand, developers can easily migrate from Next.js v12 to v13: https://nextjs.org/blog/next-13#breaking-changes. So if we assume that most people looking at our example are starting a new project, I think that v13 would be good enough.

But if we were publishing a Next.js dedicated component, I think that supporting both would have been important.

[madaher-dev]

I see many issues open regarding next13 migration and they are labeled as completed and merge and people are saying nice work and stuff but couldn't see any working example without _document.js
am i missing something?

[Yedidya10]

I ran into a weird error.
I implemented the example in the js version and the index file is displayed well. But when I click the link to the about page I am automatically sent to http://localhost:3000/about-2 and a 404 page is displayed.
Does anyone know a solution to this?

I'm using next13

[madaher-dev]

at this moment we have only one next.js example that depends on latest

Speaking on dependency on latest, this looks like we should depend on latest, 18 was released some time ago 😁

material-ui/examples/nextjs-with-typescript-v4-migration/package.json

Line 24 in 55b0bad

"react": "^17.0.2",

From what I understand, developers can easily migrate from Next.js v12 to v13: https://nextjs.org/blog/next-13#breaking-changes. So if we assume that most people looking at our example are starting a new project, I think that v13 would be good enough.

But if we were publishing a Next.js dedicated component, I think that supporting both would have been important.

next13 still have many issues in the app directory. many people are not upgrading and are sticking to 12 until 13 is stable. so having two examples would really help.

[oliviertassinari]

@madaher-dev Why not use Next.js v13 with the stable pages folder (rather than the beta app folder or Next.js v12)?

[madaher-dev]

@madaher-dev Why not use Next.js v13 with the stable pages folder (rather than the beta app folder or Next.js v12)?

Because the app/folder pages is not the only hold back in a next 13 migration. For example you still cant setCookie as cookies-next is not supported in 13. There are some issue also with importing script with a windows environment etc. Next 13 is a great concept but launching it in the way they did was premature imho