Context API có hoạt động với Server Components không?

Context API không hoạt động trong Server Components vì context phụ thuộc React runtime trên client.

Chỉ Client Components mới có thể dùng Context.
Để share data trong Server Components, truyền qua props hoặc dùng Next.js built-ins.
Tạo Context Provider là Client Component và wrap children.

tsx

// providers/theme-provider.tsx — phải là Client Component
'use client'
import { createContext, useContext, useState } from 'react'

const ThemeContext = createContext<'light' | 'dark'>('light')

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

export const useTheme = () => useContext(ThemeContext)

// app/layout.tsx — Server Component bọc Provider
import { ThemeProvider } from '@/providers/theme-provider'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html>
      <body>
        <ThemeProvider>{children}</ThemeProvider>
      </body>
    </html>
  )
}

Xem toàn bộ Next.js cùng filter theo level & chủ đề con.

Mở danh sách Next.js