Next.js Discord

Discord Forum

Context API in Next.js

Unanswered
Masai Lion posted this in #help-forum
Open in Discord
Avatar
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

Then you can just use the hook inside the children of the body
Avatar
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
Avatar
Hmm, why?
What are you trying to do
Avatar
Masai LionOP
Nothing much. Just store a state to keep track of various themes so I can then apply different styles
Avatar
Broad-snouted Caiman
Why to use context if you will not use it elsewhere ?🤔
Avatar
If you only want to pass it as a props, you can use document.body instead
Speaking of themes, check out next-themes
It handles fouc for you
Avatar
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
Avatar
you can write this anywhere where you need to change the body
like if you need to do it on button click,
then just onClick={()=>document.body.style.background = "Red"}
Avatar
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)
Image
Image
I have no idea what I'm doing wrong. Sorry it isn't clear tho
Avatar
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
Avatar
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
Avatar
fouc is flash of unstyled content
okay lets do it yourself and see if you can do it
basically, your export default function Home is by default a server component
And 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
Avatar
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
Avatar
Masai LionOP
Looks like that solved my theme issue tho but maybe layout page client feels buggy
Avatar
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)