nextjs rsc - snappify.com

app/theme-provider.tsx

'use client';

import { createContext } from 'react';

export const ThemeContext = createContext({});

export default function ThemeProvider({ children }) {
  return <ThemeContext.Provider value="dark">{children}</ThemeContext.Provider>;
}

app/layout.tsx

import './globals.css';
import type { Metadata } from 'next';
import ThemeProvider from './theme-provider';

export const metadata: Metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
};

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

ThemeProvider is a Client Component

This makes Theme Provider a Client Component as Context is not supported in Server Component

passing 'dark' or 'light' values for our Dark mode app

With the provider rendered at the root, all other Client Components throughout your app will be able to consume this context 🎉

Layout.tsx is the RootLayout i.e. top most layout in a Next.js app