Next.js 13 example

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Summary 💡

There is a great example of how to use MUI with next.js (https://github.com/mui/material-ui/blob/master/examples/nextjs-with-typescript) in this repository.

Yet, a new version of Next.js was released recently: https://nextjs.org/blog/next-13

This introduces several new concepts and ways to write React apps with server-side components in mind. To migrate from the old Next.js to the new version, one needs to do several things:

• Start using the app/ directory instead of pages/ (although this can be done incrementally)
• Inside the components of the app/ directory, one has to use fetch (or any other async/await-based data fetching method instead of getInitialProps, getServerSideProps, or getStaticProps.
• The _document.tsx and _app.tsx should be refactored into a global layout.tsx: https://beta.nextjs.org/docs/upgrade-guide#migrating-_documentjs-and-_appjs

It would be great to get directions on how to use MUI with emotion styles and cache in this scenario. Would be even better to have a sample app like the one above.

Examples 🌈

No response

Motivation 🔦

Next.js 13 is a major new version that introduces several exciting features that would be really great to use in our apps. It would be great to have a guide or directions on how to integrate MUI with the new version of Next.js instead of the old _document and _app based one.

I think there will be many developers that would want to update to the newer version and might get stuck (like myself) on the MUI integration and how the emotion styles and cache work on this new “server-first” environment without getInitialProps.

[dohomi]

I think the NextJS examples needs to be split into two separate examples: pages and app folder based. For now only pages will work due to the underlying Emotion issue https://github.com/vercel/next.js/issues/41994

[MartinXPN]

@mnajdova I don’t think this is a duplicate of #34893 Here we ask for a working example app that would work with Next.js 13 (similar to the previous Next.js version https://github.com/mui/material-ui/blob/master/examples/nextjs-with-typescript ), while the other issue reports a bug with hydration.

I think those are completely different requests/issues.