Next 13 AppDir MUI setup

Setup to get SSR working in an AppDir setup (using tss-react tooling).

Note that MUI components don't include the "use client"; directive yet so they can only be used in components that are themselves labeled as client. See Next doc

NOTE: This example isn't great since it happens that the MUI button renders correctly even if we don't go out of our way to ensure that the Emotion styles are injected in the head instead of the body on the server side. However it's not generally the case. If you want to see what the provider actually does just remove it, disable JavaScript and reload the page, you'll se that the MUI styles are injected inline in the body with the NextAppDirEmotionCacheProvider they are in the header.

Screen.Recording.2022-12-23.at.12.05.46.mov

git clone https://github.com/garronej/mui-next-appdir-demo
cd mui-next-appdir-demo
yarn
yarn dev

Give TSS a spin, trying it is adoping it 😉