Using ThemeProvider makes my whole app "client component" ?

Answered

Barbary Lion posted this in #help-forum

Barbary LionOP

2023-09-13T17:24:17.000Z

Hello guys, I have Next.js 13 project. I have created ThemeToggler using tailwind. Doing so I have wrapped my app with <ThemeProvider/> context in root layout.
Since using context requires "client component" directive. My Theme Provider is a client component. Now my whole app is wrapped inside this provider. So I am afraid my whole app is client component.
if so what's the right way of doing this !! building a Theme system in Next.js 13

Answered by Barbary Lion

And https://youtu.be/3Dw6D_WuzSE?si=xp8Rk_WnSfpcH2ph&t=630 This video helped me understand how. This pattern works.

View full answer

24 Replies

European sprat

2023-09-13T17:25:29.000Z

show your code for the root layout and theme provider

Barbary LionOP

2023-09-13T17:38:50.000Z

https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns#using-context-providers

I have done just as docs says

I just dont understand the concept

that this doc mentions

European sprat

2023-09-13T17:40:24.000Z

if you don't share your code so people can look to see what you did wrong then no one can help you

Barbary LionOP

2023-09-13T17:41:01.000Z

import type { Metadata } from "next";
import LocalFont from "@next/font/local";

import { ThemeProvider } from "@/context-providers";
import "./globals.css";

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

const calSans = LocalFont({
  src: "../../public/fonts/CalSans-SemiBold.ttf",
  variable: "--font-calsans",
});

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en" className={[calSans.variable].join(" ")}>
      <body className="bg-primary-light font-primary dark:bg-primary-dark text-zinc-500 text-sm font-thin ">
        <ThemeProvider>{children}</ThemeProvider>
      </body>
    </html>
  );
}

European sprat

2023-09-13T17:41:34.000Z

this looks fine, let's see themeprovider

Barbary LionOP

2023-09-13T17:41:35.000Z

This is RootLayout

This i ThemeProvider

Theme is working fine

European sprat

2023-09-13T17:42:53.000Z

this is the correct way to implement such a thing

Barbary LionOP

2023-09-13T17:43:16.000Z

I just dont understand that, since ThemeProvider is client component

and wrapping my whole app inside ThemeProvider

won't that make my app client component !!

European sprat

2023-09-13T17:44:04.000Z

no this is the way server components work

Barbary LionOP

2023-09-13T17:45:12.000Z

yeah thats what I dont understand

not-milo.tsx

2023-09-13T18:20:16.000Z

it's just a matter of which pieces of your ui need client side hydration and which don't

wrapping your server components in a client side context provider doesn't affect them cause they still don't need any client side js to be rendered

when your page loads only the provider has to be hydrated and wait for js to load, everything else will have been already rendered on the server

Barbary LionOP

2023-09-14T08:12:25.000Z

Yes, I am beginning to understadn this. Thanks @not-milo.tsx

Barbary LionOP

2023-09-14T08:12:55.000Z

And https://youtu.be/3Dw6D_WuzSE?si=xp8Rk_WnSfpcH2ph&t=630 This video helped me understand how. This pattern works.

Answer

Barbary LionOP

2023-09-14T08:13:27.000Z

Any other helpful resources related to this concept would be great.

Barbary LionOP

2023-09-14T11:04:40.000Z

https://demystifying-rsc.vercel.app/ This app does great work on showing how Server components, client components and Next.js works internally. and clears most of the confusions around them