Förklaring

Precis som useState och useEffect är useContext en React-hook som bara kan köras i klientkomponenter. Server-komponenter renderas utan ett live React-träd och har inget kontext-system att läsa från på servern.

Kontextar i App Router fungerar men måste sättas upp i klientkomponenter. En vanlig lösning är att skapa en provider-komponent märkt med 'use client' som omsluter de delar av trädet som behöver kontexten. Providern kan sedan importeras i en server-komponent och ta emot server-renderat innehåll via children.

Vanliga orsaker

Saknad 'use client'-deklaration i en komponent som anropar useContext. Import av en context-consumer från ett tredjepartsbibliotek utan att biblioteket deklarerar 'use client'.

Lösning

Skapa en 'use client'-provider och läs kontexten i en klientkomponent:

// context/ThemeProvider.js
'use client';
import { createContext, useContext, useState } from 'react';

const ThemeContext = createContext(null);

export function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light');
  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

export function useTheme() {
  return useContext(ThemeContext);
}

Server-komponenten importerar ThemeProvider och skickar sina server-renderade barn igenom utan att hela trädet blir klientrenderat.