Context with Next.js 14 - Course part 18

[@djribs]

I've watched or read a BILLION tutorials on Context API in React and this is the only one that made enough sense to get it working and more importantly to understand it, while converting it to my use case! You're a champion!

[@codewithguillaume]

Oh dude your message means so much to me… thanks. If you want to go deeper I am launching a plat for soon : thedevelopercourse.com ! Best

[@djribs]

I spoke too soon! It seems I've done something incorrectly because no matter where I try to set the context, the default value never changes when trying to read it. I was of the understanding that wrapping the RootLayout of the app in the context as you've described in your video would allow it to be consumed by all components and their children since everything is a descendant of RootLayout. Any idea what could be wrong?

[@djribs]

Turns out it was working after all! I wasn't actually using the context value yet. I was trying to console.log its value to confirm it worked, which kept showing the default value. When I actually used the value in another component it worked. It seems console.log always shows the default value, though I have no idea why!

[@Juajuaa18]

Correct me if I'm wrong (I'm learning server side components). If you 'use client' on root layout, then your whole application will be client side only and you won't be able to use any server side components or rendering, right?

[@mohamedtsx]

Your explanation is great! You start with a single piece, and if it's okay, let's see another one. Thanks a lot!

[@codewithguillaume]

Thanks my friend ! Discord if you want to join dub.sh/codewithg-discord

[@zhongyou916]

Your tutorial is very easy to understand. I've read many other articles and couldn't understand. thanks a lot.

[@ryumarukurozaki7245]

You're the best! this helped me for my personal project! keep making videos!

[@codewithguillaume]

Yesssss !

[@polidahiya9024]

using context api like this i don't think there is any use of using next js over react , now the whole application is a client component

[@jordanboutrois1584]

Hi, I'm asking a question, you're declaring your context provider near to the root of application, so Is each children which passed into Provider are client components? and therefore Doesn't this prevent us from taking advantage of the server components? (Thanks for the video, great job)

[@djribs]

Look up "interleaving" in React. The short answer is no, they all won't become client components from putting context at the root.

[@staromofficial]

no, read nextjs docs, they have explained it, when u wrap with cleint componet it does not make its childs a cleint component . They still treated or used as server component

[@DhaouJawhar]

just what I needed, thank you so much!! ♥

[@lukeparker6026]

Thank you for creating this video!

[@codewithguillaume]

No problem Luke I hope you find your responses

[@ajaljose2690]

At last something that worked for me. thank you :)

[@codewithguillaume]

Nice join my discord 😉

[@memoryclips.moment]

I relly like the way he teach it can't be easier than this tnx 👍

[@felipeconceicao4465]

Amazing video, thank you so much. Best wishes from Brazil

[@Dana-Baiardi]

you did it so easy!!! :) loved it! It worked fabulous!!

[@codewithguillaume]

Amazing! Glad it helped you 😉👍

[@DePhpBug]

Thanks the author of this youtuber , the content helps me alot. Don't stop producing great content , keep it up (y)

[@IbrahimSowunmi-sp4qs]

Huge video, thank you!

[@rogeriolimas]

Great video! Thank you!

[@TarasDyda]

What is the use of NextJS if it renders the content on the client side?

[@tekskilldev8310]

Beautifully explained. However, I have done the same i.e. providing context to all components(sharing provider) by following next ui method. That method is install nextui and create a provider.js file within the app folder. This provider works as wrapper which is then imported in the layout.js file wrapping all components in the layout including navbar you create within the layout file. I think this eliminates the need of src folder and need to use useContext function and all other context creation. See if you agree?

[@ivannavas8620]

Thanks so much, just the video i needed 👏

[@guvenfazli]

Thank you so much, i finally got it.

[@mtspivato]

great content!

[@kmplus360]

I am a new subscriber. Thank you very much for the content

[@codewithguillaume]

Welcome and thank you my friend !

[@sergio058-pb6hf]

just what I needed, thank you so much!!

[@techug2719]

So, my question is on the metadata, i export my metadata from the root layout.tsx, making the root layout client doesn't allow me to export this metadata, how would you go about this?

[@Xurshid_Yoldoshev]

thanks from uzbekistan

[@codewithguillaume]

Thanks man !

[@Ziad-Al]

great explanation, thank you, how about if we want to use the name and useName inside a page which is server component or simply not declared as "use client"?

[@Sniksax]

Merci Guillaume, t'es le meilleur !

[@codewithguillaume]

Merci Mohamed !

[@violinsheetmusicblog]

Why do you define the state twice? Once in useState() and another time in createContext()? Seems redundant, not sure why it is necessary Oh I guess it's because AppContext can be used on its own without the component

[@codewithguillaume]

Yes

[@LorenzoSemorile]

Great video. Thanks so much. When i try to use the contextProvider in a server component, my app goes in a infinite loop. Any suggest?

[@pauliusm2735]

God bless and ty!

[@pnh.2314]

Best explained 🤌

[@samuelizevbizua]

God bless you brother. Really helped

[@codewithguillaume]

Thanks my friend

[@altafansari752]

But if you wrap the server side component inside the Client component then all the server components serve as client components?

[@Nscb1947]

no

[@Juajuaa18]

@@Nscb1947 why not? if root layout is client component, then all of it's children are client too. Am I wrong? Please correct me if I am, I'm learning about server side components.

[@IAmMrLiverpool]

Hi, thx for your work. Can I ask which theme you use for vscode (and which icons). thanks in advance

[@codewithguillaume]

Tokyo night storm 😉

[@sofianealloui]

thank you so much sir you're a legend, ChatGPT wasn't helping with this

[@edgardejesusmendozaortegon7655]

Thanks teacher!!!! Excelent video!!!!

[@Eye974]

thx

[@LeonardoLuzx]

in this way was not possible to use generateStaticParams, thats a server component function.

[@frenchmike]

but isn't it bad to make the root layout a "use client" ? also won't it make everything downstream a client component and page ?

[@codewithguillaume]

Yep depends on what you want

[@VadimBogomazov]

What is I want to set metadata in layout file? If I put "use client" it is not gonna work

[@joao-pedro-alves]

Well, that's a good workaround to work with contexts but an annoying problem about that approach is that all components which are going to use the context need to be client-side. components client side can't be async. So, in my case I'm trying to share to all components the current locale to implement i18n but i need to use an async useTranslation hook and this approach fails in this case, a very common case btw

[@codewithguillaume]

Absolutely, it really depends on how you want to build your app: client or server. On next examples I’ll explain more 😉

[@galaxian9393]

You should "use client" in the context file, isn't it ?

[@rykageee]

Hey :) can you do a demonstration on how to do NextJS global context with XState Machine?

[@leandrojuarez1794]

Nice video

[@les6837]

bro how did you put layout as use client??

[@awais_ansarii]

❤

[@codewithguillaume]

Thanks my friend

[@bujerolandia]

Great content bro! Your video really helped me to set a global context for my app very easily and fast! Using NextJs 14 and Ts

[@adrielamadi8585]

can you please provide the link to the code

[@codewithguillaume]

Description 😉👍

[@JosuaTampubolon-rv3pg]

makasih bang sangat membantu