4

I just started my first NextJS app and followed this guide to add MUI. The only difference I can see is that I'm using the experimental app directory of NextJS 13.

When following the guide, I get a server error of Uncaught TypeError: React.createContext is not a function which is basically rather clear, as the context API is only available to client components and can therefore rather easily be "solved" by placing the 'use client'; directory on top of the erroneous component.

Unfortunately it seems like this is required for every component which uses any part of MUI. E.g. I'd also have to 'use client;' in my root layout.tsx if I'd like to wrap my whole app with the ThemeProvider etc.

My questions are the following:

  1. Do I really have to 'use client;' everywhere I'd like to use MUI or is there some other way around?
  2. If 1 is true: Doesn't this make MUI completely useless in combination with NextJS as it prevents the usage of all the SSR, SSG, ISR goodness etc or do I have some kind of misunderstanding here (I'm very new to NextJS in general...)?
  3. If 1 & 2 are true: Are there other recommendable UI frameworks or libraries which bring a good set of "ready to use" (and out of the box good looking) controls, components etc. that work better with NextJS without those limitations?

FYI, I have the following versions installed ATM:

  • next@13.0.6
  • @mui/material@5.10.17

Update

I should have read the NextJS beta docs more careful before posting the question:

It seams like there's no way around this ATM as stated here in the docs and again here in the a ticket.

So this answers question 1, as there doesn't seem to be a way around 'use client'; for now.

However, I'd still really appreciate answers and opinions on questions 2 & 3.

suamikim
  • 5,350
  • 9
  • 40
  • 75
  • 2
    Take in consideration `app` directory feature and Server Components themselves are still fairly new so most UI third party packages are not optimized for this just yet (Chakra, MUI, etc). However, they are not useless and you can still use Next.js v13 with the regular `pages` folder and even combine it with the `app` directory feature. – ivanatias Dec 11 '22 at 19:09
  • Fair point! As already stated, I'm very new to NextJS & don't really see the big picture yet on when to use what kind of component, how to best use `app` vs `pages` etc. I just figured it would be best to stick to the "new way" right from the beginning to prevent migrations later. I'm currently trying other libraries like React Spectrum, Tailwind UI etc. and will see how that goes but on first glance it seems like they're all "suffering" from the same topic... – suamikim Dec 11 '22 at 19:19
  • 1
    For me, one of the most notable advantages of `app` directory and server components is the reduced client-side bundle size. But again, we need to wait a bit longer for all these UI packages to adapt accordingly. What you can do for now is to try and make the components that use these UI elements as small and specific as possible so you can move them to the leaves of the components tree, thus keeping client-side bundle as small as possible. – ivanatias Dec 11 '22 at 19:28

2 Answers2

0

Ran into the same issue using

"@emotion/react": "^11.11.0",
"@emotion/server": "^11.11.0",
"@emotion/styled": "^11.11.0",
"@mui/material": "^5.13.1",
"@types/react": "18.2.0",
"@types/react-dom": "18.2.4",
"next": "13.4.3",
"react": "18.2.0",
"react-dom": "18.2.0",
"typescript": "5.0.4",

And using the below "new" paradigm with nextjs 13.

app
|-page.tsx

Reverting back to

pages
|-index.tsx

and putting my MUI code in there seems to work for the time being.

Syed Jafri
  • 416
  • 8
  • 17
-1

Don't use Experimental app version for now it will buggy so for I can't even use Canvas in my application

KavinSelvarasu
  • 99
  • 1
  • 4