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:

nextauthjs/next-auth#5639 next-auth is now compatible with Node.js 18

nextauthjs/next-auth#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:

vercel/next.js#41994

emotion-js/emotion#2928

mui/material-ui#34896

mui/material-ui#34898

mui/material-ui#34905

nextauthjs/next-auth#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!