Context API in Next.js
Unanswered
Masai Lion posted this in #help-forum
Masai LionOP
I want to pass a context which I want to be available to the body of my page. How do I acheive that? Do I directly wrap the body tag instead of the children in layout.tsx? How then would I use it on the body
38 Replies
Alfonsus Ardani
Yes, but wrap the {children} inside the <body>.
See here https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns#using-context-providers
See here https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns#using-context-providers
Then you can just use the hook inside the children of the body
Masai LionOP
Yea I know about the method used in this link. But what I want to do is use the hook in the body tag itself not just the children. In fact, I might not need to use it in the children
Alfonsus Ardani
Hmm, why?
What are you trying to do
Masai LionOP
Nothing much. Just store a state to keep track of various themes so I can then apply different styles
Broad-snouted Caiman
Why to use context if you will not use it elsewhere ?🤔
Alfonsus Ardani
If you only want to pass it as a props, you can use
document.body insteadSpeaking of themes, check out next-themes
It handles fouc for you
Masai LionOP
Document.body? Will I be able to pass it to the body text
Of course I'll need it in other components. I said might cus if I pass it to the body, I'll be able to reference it in other parts
Alfonsus Ardani
you can write this anywhere where you need to change the body
like if you need to do it on button click,
then just
then just
onClick={()=>document.body.style.background = "Red"}Masai LionOP
Ok but this wouldn't work because I have to keep track of the themes so the other parts will change along with it. Currently I'm using numbers to keep track of the themes. The numbers change on toggle. I gave up on surrounding the body tho but now I'm having an issue. It says useTheme is not a function. BTW, useTheme is the custom function I created that just returns the useContext(Them context)
I have no idea what I'm doing wrong. Sorry it isn't clear tho
Alfonsus Ardani
Just use next-themes
No offense but its a bit hard to set themes correctly without fouc
UseTheme is not a function because useTheme is declared in the client comps
Masai LionOP
How then do I fix it. I tried look at next-themes nom docs. It was all about setting up in the page router. What is fouc btw. I would really appreciate it If I could acheive this myself tho
Alfonsus Ardani
fouc is flash of unstyled content
okay lets do it yourself and see if you can do it
basically, your
And you can't use client-side hooks in server component
export default function Home is by default a server componentAnd you can't use client-side hooks in server component
so you have to create a client component by writing "use client" and exporting it
the client component can have useContext() to consume your theme provider
Masai LionOP
Yes I tried using use client in page.tsx. Didn't work out well I kinda found out a way tho. I restricted use client to on ThemeProvider. I believe it was the one calling use state
Apparently that wasn't enough
I had to use use client in my layout.tsx too and page.tsx too
Doesn't feel right
Masai LionOP
Looks like that solved my theme issue tho but maybe layout page client feels buggy
Alfonsus Ardani
themes are 100% controlled by the client
it feels right to me ðŸ˜
if you dont want to use client
then use CSS to control the display of your themes
that way it can be server rendered
of course there are still cases where you need to show component, outside of the CSS ability
(also check out next-themes)