Recently, I created a Next.js v13 typescript app using npx create-next-app. After removing all the default css and html, I started incorporating Material UI into my project. However, when I added the CssBaseline, it resulted in numerous errors related to missing React imports. This issue seems to stem from the root layout component being accessed from a server component according to online resources. Here's a snippet of the error message:
Server Error
TypeError: createContext only works in Client Components. Add the "use client" directive at the top of the file to use it. Read more: https://nextjs.org/docs/messages/context-in-server-component
This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
React
node_modules/@emotion/react/dist/emotion-element-6bdfffb2.esm.js (14:41)
... (error continues)
I'm puzzled by this as I expected the implementation should work seamlessly. What could I possibly be overlooking?
I believe once I resolve this issue, integrating MUI into my application will become straightforward enabling me to expand its capabilities.
Initially, I contemplated replicating the setup used in material-next-ts example within the pages router. However, the version of emotion utilized offers a simpler default approach that requires minimal configuration. Hence, I find the extensive steps taken in the pages route unnecessary. It would be beneficial if this example is adapted for the app router!