Monitor Next.js 13 Layout integration with Emotion + MUI

[ryanelian]

Next.js 13 was released with built-in layout support in /app folder-based project. However, Emotion and MUI are not compatible yet with it. This issue tracks the related issues for implementing above-mentioned feature:

~~https://github.com/nextauthjs/next-auth/issues/5639~~ next-auth is now compatible with Node.js 18

~~https://github.com/nextauthjs/next-auth/issues/5650~~ next-auth is now compatible with Next.js 13

We can now upgrade to Next.js 13, but we cannot use /app folders yet until these issues are solved:

https://github.com/vercel/next.js/issues/41994

https://github.com/emotion-js/emotion/issues/2928

https://github.com/mui/material-ui/issues/34896

https://github.com/mui/material-ui/issues/34898

https://github.com/mui/material-ui/issues/34905

~~https://github.com/nextauthjs/next-auth/issues/5647~~

---

Related:

https://beta.nextjs.org/docs/rendering/server-and-client-components#convention

'use client';

import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

Components which are client-side must be marked with 'use client';

---

[Altroo]

Thank's alot @ryanelian, i just want to mention that the support for Next.js 13 app directory is now fixed for next-auth.

[curiouscod3]

I think it wouldn't be easy to resolve all the UI/Styling compatibility issues bc the server component is designed for that. The best way to deal with it is to make a wrapper component with use client and or use the traditional pages for the route parts which have such an issue !

[mj12albert]

As of v5.14.0 Material UI is compatible, you don't need to manually wrap with use client anymore!