Next app router method is being used. Emotion is also being used.
"use client";
import { Global, ThemeProvider } from "@emotion/react";
import globalStyle from "@/app/style/global";
const theme = {
colors: {
primary: '#3498db',
secondary: '#2ecc71',
},
};
export function Provider({ children }: { children: React.ReactNode }) {
return (
<ThemeProvider theme={theme}>
<Global styles={globalStyle} />
{children}
</ThemeProvider>
);
}
I created the provider like this
import { Provider } from "@/app/provider";
export default function Layout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>
<Provider>
{children}
</Provider>
</body>
</html>
);
}
And the layout is structured like this
But this error occurs
TypeError: createContext only works in Client Components. Add the "use client" directive at the top of the file to use it.
I know that adding use client to the layout can solve the problem, but I don't want to do that and I don't think it's necessary.