[examples] Use material-nextjs integration package

[siriwatknp]

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

[mui-bot]

Netlify deploy preview

https://deploy-preview-40199--material-ui.netlify.app/

Bundle size report

No bundle size changes (Toolpad)
No bundle size changes

Generated by 🚫 dangerJS against 96bbe2d

[seanparmelee]

Apologies if I'm missing something, but why do we have these versioned paths (v13-* and v14-*)? It looks like v14- just re-exports everything from v13- so wondering if there's a reason we couldn't have @mui/material-nextjs/pagesRouter and @mui/material-nextjs/appRouter?

[siriwatknp]

Thanks for the question. It's the versioning flexibility for us to maintain. If Nextjs releases a new major (e.g. v15) with breaking changes but Material UI is still in v5, we still have room to create a new integration with Nextjs v15 and people can just bump the material-nextjs version and switch to v15-* APIs.

[siriwatknp]

For developers, they just need to use material-nextjs with the same version as Material UI and import the integration from the folder that matches your Nextjs version.

[DonikaV]

Can not find a module or declarations for
import { AppRouterCacheProvider } from '@mui/material-nextjs/v14-appRouter';

That works
import { AppRouterCacheProvider } from '@mui/material-nextjs/build/v14-appRouter';

[siriwatknp]

I'm getting this error when I fire up the material-ui-nextjs example—haven't checked the others:

Error: Attempted to call createTheme() from the server but createTheme is on the client. It's not possible to invoke a client function from the server, it can only be rendered as a Component or passed to props of a Client Component.

Opps, for got to add use client directive to the theme file, it's been fixed.

[samuelsycamore]

I'm getting a hydration mismatch in the v4-v5 migration example:

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>.

All of the others seem to be working correctly.

[siriwatknp]

I'm getting a hydration mismatch in the v4-v5 migration example:

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>.

All of the others seem to be working correctly.

This is not related to the changes but due to Next.js 14. I pushed a fix in 96bbe2d