very frustrating error coming off from nextjs with server side and client side rendering, essentiality, we are trying to access createContext (an reactjs function) that is a client side function, during server side rendering! the fix is easy. it’s a common beginners mistakes where you assume and not familiar with when and where code should be written or familiar with what is considered backend code and what is considered front end code.
Solution
If your entire component is front end or client side only, all you’ll need to do is to tell the compiler this code/function/component are client side rendering only, this way the component won’t be attempted rendering in the backend and won’t be able to detect createContext (which is, again a front end/client side function).
"use client"
// code here will be rendered in the client side only, where we can find "createContext"
if you component is big and you still wants the benefits of server side rendering, all you need to do is some decoupling, and create another file for the specific area where you use “createContext” (or the 3rd party library that you use) and within the new component, simply add the “use client” at the top, and import that component into the larger/parent/previous component file.
This way you’ll benefits the best of both worlds, the server side rendering for the entire page and the client side rendering for that specific component – Good luck!
Lior Amsalem embarked on his software engineering journey in the early 2000s, Diving into Pascal with a keen interest in creating, developing, and working on new technologies. Transitioning from his early teenage years as a freelancer, Lior dedicated countless hours to expanding his knowledge within the software engineering domain. He immersed himself in learning new development languages and technologies such as JavaScript, React, backend, frontend, devops, nextjs, nodejs, mongodb, mysql and all together end to end development, while also gaining insights into business development and idea implementation.
Through his blog, Lior aims to share his interests and entrepreneurial journey, driven by a desire for independence and freedom from traditional 9-5 work constraints.
Leave a Reply