You can't create React Context in a Server Component in Next.js

You can copy the above snippet by clicking inside it.

Let's say you want to add dark mode to your app. We can create a ThemeProvider for it and store the value dark or light. The best place to do this would be RootLayout i.e. root of the tree. Since context providers are typically rendered near the root of an application to share global concerns, like the current theme. Because context is not supported in Server Components, trying to create a context at the root of your application will cause an error ❌. Hence we can create a ThemeProvider, mark it as ‘use client’ and pass that on.

Sign up for my Newsletter 🏂

💌 A Frontend Newsletter you'll love, Get FREE weekly Snacks

  • 🎨 A code snippet to teach Complex Topics visually

  • 🚀 Latest Frontend Gossip

  • 👉 Frontend Developer Toolkit - with FREE templates and tools

🪴 All this to help you grow as a developer & in your day to day!

No spam, unsubscribe anytime.