Can't integrate latest next.js with pages router with MUI

[zbycz]

Related page

https://mui.com/material-ui/integrations/nextjs/

Kind of issue

Broken demo

Issue description

Run yarn create next-app
Follow demo.
Observe this error:

❯ node -v
v20.16.0

❯ yarn next dev
  ▲ Next.js 14.2.5
  - Local:        http://localhost:3000

 ✓ Starting...
 ✓ Ready in 2.4s
 ○ Compiling / ...
 ⨯ ./node_modules/@mui/material-nextjs/v13-pagesRouter/pagesRouterV13App.js:2:1
Module not found: Can't resolve '@emotion/react'

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./node_modules/@mui/material-nextjs/v13-pagesRouter/index.js
./src/pages/_app.tsx

Also the _app.tsx file looks very different. It should be updated to latest next.js template.

Context

Install latest next.js with pages router and use MUI.

Search keywords: next.js with pages router, MUI

[DiegoAndai]

Hey @zbycz, did you check this comment? #40798 (comment)
Does this solve your issue?

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@zbycz How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.