Blue Beltserver-componentslockPREMIUM

createContext Requires a 'use client' Directive in Next.js App Router

This provider file has no directive at the top and is imported into app/layout.tsx, a Server Component.

REACT_MODULE // 0x42

// app/providers.tsx
import { createContext, useState } from 'react';
export const ThemeContext = createContext('dark');
export function ThemeProvider({ children }) {
const [theme] = useState('dark');
return (
<ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>
);
}

The build fails with an error about createContext being unavailable. What is the correct fix?

lock

This Drill is Locked

This is a premium drill. Continue on to the next free drill in the sequence.

CONTINUE DRILLarrow_forward