Just what I needed, thank you! I was bummed when the next/beta docs were lacking under the context section, but this fulfilled it perfectly! I also love how you got right into the material. Excellent video!
In this case all your application will work client side, a server component inside a client component will also become client and since root layout page is loaded on every page all your components will be client side, you lose therefore the main interest of next, and moreover it can pose some problems of scalability, because you no longer have access to the next's functions which run on the server side
So does this mean that when you check your app in chrome using the dev tools, the preview network for server side rendering result will show nothing? (Just like react)?
Thank you so much for this video, I spent a whole day to figure out how to wrap the AuthProvider around the children in Layout.tsx and ran into all kinds of errors. This video is the only one I found that shows what to do when there is no
Yeah I realized after making my crash course on Next.js 13, server side components don't work with Context API. I'm thankful you can still use Context, it's just a more complicated setup
what is the advantage of nextjs over reactjs if we have to use "use client" directive to convert a server component into a client one? What am I missing here? Thanks
@merakli2022 I was thinking this too, I've just trialed this method and I think using 'use client' only in the context store/component rather than at a page level actually still means the rest of the page is still SSR. Inspecting the page source after the build I can still see the rest of the page content is still there so Next.js would still be beneficial as we're not outputting a SPA but a mixture of SSR and client only content (if that makes sense)
Exactly, it doesn't make sense to use context, the idea is to avoid client components. Obviously you have to use client components, but the idea is to declare them in the child components
@@alerodriguezn I stopped the video halfway through for the same reason. What I love about nextjs is how easy it is to write full-stack code, without jumping into hook hell. I'm trying to get away with that and 13.1 delivers; I'm not going to sabotage sever components by wrapping them in a hacked client context provider.
Amazing tutorial bro i was trying to learning Context api from many days but not able to understand. After watching your video Now i understand how it works. Thanks man!😄
there is an issue with context, if you need to support few languages and when you switching locales (using middleware) for example: from /en/home to /de/home, all context will be lost
Год назад
It works but does not it go against all the server-side Next JS' purpose?
Thanks for creating this video! However I am having trouble adding the Global Context Provider to layout.js. I am getting the following error: error - SyntaxError: Unexpected token u in JSON at position 0 at JSON.parse (). I am not having much luck online, and was wondering if you have come across this error. The provider is already written in an arrow function which is the suggested workaround, but that doesn't appear to be working.
@johannranudd6671 I'm not sure how it happened but when I responded to @kyoukisu3628 I overwrote his reply. Unfortunately I can't remember the github link that was added. After some more digging I finally came across another github ticket mentioning my exact problem. The suggested fix was to upgrade my current version of 13.3.0 to 13.3.1-canary.4(npm i next@13.3.1-canary.4) which fixed the jSON.parse issue. I then ran into a next auth dependency conflict which I used npm i next-auth --legacy-peer-deps to get pass that error. Although I was not happy with that solution I am still able to persist and retrieve data from my database. Hope this helps.
why will I need useContext when you are just using setState in another file. Set the values in GlobalContextProvider file and use it in another file. See if it works
Isn't there a way of passing on the `value` prop all from GlobalContext without having to specify every single one of the values? You can end up having a lot of properties and setters, and if you always have to pass them inside the value prop, it can get huge and ugly very quickly.
What if you have server components in which you fetch data, and you need user information from the context to make the API call? This must be a common problem.. how do I solve it?
You can only get the data from a client side component. So an option would be to create a client side API component and import that into your server side component
@@NativeNotify ok but doesn’t that then remove the benefit from having a server side component that fetches the data? That data then has to be fetched from the client component inside the server component?
I have this error that says "TypeError: Cannot read properties of null (reading 'useContext')". by the way this is a normal js file. not using typescript. could anyone enlighten me? TIA! "use client"; import { createContext, useContext, useState } from "react"; const GlobalContext = createContext(); export default function GlobalContextProvider({ children }) { const [loggedIn, setLoggedIn] = useState(false); return (
Hey, nice tutorial 👏👏 Also, Jack showed a way with zustang where state can also be access in server components. ruclips.net/video/OpMAH2hzKi8/видео.html Is there a way to do so with Context API?
For those who use Redux Toolkit, I just made a Next.js 13 Redux Toolkit video. You can find it here: ruclips.net/video/Onekwb2l9zg/видео.html
Just what I needed, thank you! I was bummed when the next/beta docs were lacking under the context section, but this fulfilled it perfectly! I also love how you got right into the material. Excellent video!
Thank you!
In this case all your application will work client side, a server component inside a client component will also become client and since root layout page is loaded on every page all your components will be client side, you lose therefore the main interest of next, and moreover it can pose some problems of scalability, because you no longer have access to the next's functions which run on the server side
So does this mean that when you check your app in chrome using the dev tools, the preview network for server side rendering result will show nothing? (Just like react)?
Thanks man. I was supspecting the same thing too.
My thoughts exactly. Thanks for confirming.
how can you solve this problem so ?
Thank you so much for this video, I spent a whole day to figure out how to wrap the AuthProvider around the children in Layout.tsx and ran into all kinds of errors. This video is the only one I found that shows what to do when there is no
My friend! I was just looking for a good way of using context with next 13! Thanks my friend
Yeah I realized after making my crash course on Next.js 13, server side components don't work with Context API. I'm thankful you can still use Context, it's just a more complicated setup
This is the best video for context api in nextjs.
what is the advantage of nextjs over reactjs if we have to use "use client" directive to convert a server component into a client one? What am I missing here? Thanks
@merakli2022 I was thinking this too, I've just trialed this method and I think using 'use client' only in the context store/component rather than at a page level actually still means the rest of the page is still SSR.
Inspecting the page source after the build I can still see the rest of the page content is still there so Next.js would still be beneficial as we're not outputting a SPA but a mixture of SSR and client only content (if that makes sense)
if every other component is render under a client component GlobalThemeProvide then what is purpose of using nextjs?
Exactly, it doesn't make sense to use context, the idea is to avoid client components. Obviously you have to use client components, but the idea is to declare them in the child components
@@alerodriguezn I stopped the video halfway through for the same reason. What I love about nextjs is how easy it is to write full-stack code, without jumping into hook hell. I'm trying to get away with that and 13.1 delivers; I'm not going to sabotage sever components by wrapping them in a hacked client context provider.
Awesome! This is what I'm looking for. Many thanks!
Thank you! Exactly what I was looking for. 😊
Im on next 14....this is still useful🤝 thank you kind sir!
Amazing tutorial bro i was trying to learning Context api from many days but not able to understand.
After watching your video Now i understand how it works.
Thanks man!😄
Does that mean, to use context globally in next.js app, the whole app has to be an client component?
No, you still have to declare if a component is a client component. This will not make every component a client side component
Thank you so much!
How did you end up with this logic? Could not find this in the doc
I can't build the project with the error in "children".... how do I build it?
You are life saver. Thank you so much for sharing this.
there is an issue with context, if you need to support few languages and when you switching locales (using middleware) for example: from /en/home to /de/home, all context will be lost
It works but does not it go against all the server-side Next JS' purpose?
Is it going to be the same in Next.js 14?
Thanks for creating this video! However I am having trouble adding the Global Context Provider to layout.js. I am getting the following error: error - SyntaxError: Unexpected token u in JSON at position 0
at JSON.parse (). I am not having much luck online, and was wondering if you have come across this error. The provider is already written in an arrow function which is the suggested workaround, but that doesn't appear to be working.
i got same error
@@kyoukisu3628 thanks for your help! I will try this out!
got the same problem, what di you do to fix it?
@johannranudd6671 I'm not sure how it happened but when I responded to @kyoukisu3628 I overwrote his reply. Unfortunately I can't remember the github link that was added. After some more digging I finally came across another github ticket mentioning my exact problem. The suggested fix was to upgrade my current version of 13.3.0 to 13.3.1-canary.4(npm i next@13.3.1-canary.4) which fixed the jSON.parse issue. I then ran into a next auth dependency conflict which I used npm i next-auth --legacy-peer-deps to get pass that error. Although I was not happy with that solution I am still able to persist and retrieve data from my database. Hope this helps.
@@danielszepesi1558 Thank you!
One question. It's OK turn "use client" the root "page.tsx" or not problem? Thanks to share this buddy.
why will I need useContext when you are just using setState in another file. Set the values in GlobalContextProvider file and use it in another file. See if it works
Amazing 🔥🔥
Amazing, thank you!
You can fix the children error by just passing the type like this
export const GlobalContextProvider = ({ children }:{children:ReactNode}) => {
Thanks so much for pointing that out!
Isn't there a way of passing on the `value` prop all from GlobalContext without having to specify every single one of the values? You can end up having a lot of properties and setters, and if you always have to pass them inside the value prop, it can get huge and ugly very quickly.
this context not work in mobile devices?
What if you have server components in which you fetch data, and you need user information from the context to make the API call? This must be a common problem.. how do I solve it?
You can only get the data from a client side component. So an option would be to create a client side API component and import that into your server side component
@@NativeNotify ok but doesn’t that then remove the benefit from having a server side component that fetches the data? That data then has to be fetched from the client component inside the server component?
what if i build the project, is the build will failed because the error?
You could try to put : any after the children object to make the error go away
Thanks!
Thanks a lot!
Crack
THANK YOU!!!!
I have this error that says "TypeError: Cannot read properties of null (reading 'useContext')". by the way this is a normal js file. not using typescript. could anyone enlighten me? TIA!
"use client";
import { createContext, useContext, useState } from "react";
const GlobalContext = createContext();
export default function GlobalContextProvider({ children }) {
const [loggedIn, setLoggedIn] = useState(false);
return (
{children}
);
};
export const useGlobalContext = useContext(GlobalContext);
update: already solved this.
export const GlobalContext = createContext({});
...and...
export function useGlobalContext() {
return useContext(GlobalContext);
}
Thank you!
Only use client
Thank you
watching on 14th feb 2024
Hey, nice tutorial 👏👏
Also, Jack showed a way with zustang where state can also be access in server components.
ruclips.net/video/OpMAH2hzKi8/видео.html
Is there a way to do so with Context API?
Please, do not assign the entire page as a client side component! 😢
I disliked this because a tutorial is not "WHAT" you're doing, rather it is "WHY" you're doing it?
You saved my life
You saved me hours man thank you for a simple quick answer.
const [newSubscriber, setNewSubscriber] = useState(true); lol
thank you!