Material UI Next.js 13 Server Components Support -- Timeline?

[zidinberu]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

When should we expect MUI to provide full integration with Nextjs 13 Server Components? WITHOUT declaring everything "use client"! I hate/don't-know-much-about tailwindcss so MUI has to catchup!

Current behavior 😯

No response

Expected behavior 🤔

No response

Context 🔦

No response

Your environment 🌎

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

[mwskwong]

If your goal is just that we don't have to declare use client every time we import any MUI component, then the good news is a PR is already in the work: #37656

If your goal is for MUI to move away from Emotion, which only works in client component, then we have a long way to go #30660.

[samuelsycamore]

Hey @zidinberu thanks for reaching out! To expand a little on @mwskwong's comment:

• [core] Prepend "use-client" directive + add docs and examples for using MUI libraries with Next.js App Router #37656 will be merged ASAP (ideally before next week's release). This PR adds 'use client' to all components so you don't have to. It also includes guides on using the Next.js App Router with all MUI Core libs (Material, Joy, Base).
• The bigger issue, as mentioned, is the reliance on Emotion for styles. Unfortunately, Emotion's way of doing things is just incompatible with the new paradigm of RSCs. We recently hired a new engineer to tackle this problem full-time, and he's making solid progress exploring POCs for an in-house zero-runtime CSS styling solution. We don't have an estimated timeline for shipping this, but I can assure you that it's one of our highest priorities right now.

I've marked this issue as a duplicate because #34905 is where this conversation is taking place. I would recommend following that issue for updates on our progress with the bigger issue described above. Cheers.

[coder-xiaotian]

Maybe you can use this SWC plugin as a temporary alternative.
https://github.com/coder-xiaotian/swc-useclient