Support of server components in Next.js

[shemayas]

Is there support for server components in Next.js?
I'm trying to use it with this example using the app directory instead of pages, but I'm getting an error:

[ullaskunder3]

this is causing because you are trying to use context hooks in Next.js which is by default uses SSR,

if you still want to use createContext then you might have to take different approach

• 1st option you can make it a CSR client side render by using "use client" at the top
• 2nd option you can create a separate file where you should implement the your context code with "use client" at the top

example

"use client";

import { createContext, useContext } from 'react';
import { useSession } from '../lib/useSession';

export const AppUserContext = createContext({
  session: null,
  profile: null
});

export default function AppUserProvider({ children }) {
  const appUserInfo = useSession();
  return (
    <AppUserContext.Provider value={appUserInfo}>
      <>{children}</>
    </AppUserContext.Provider>
  );
}

export const useAppUserGlobalContext = () => {
  const context = useContext(AppUserContext);

  if (context === undefined) {
    throw new Error('data must be used inside AppUserProvider');
  }

  return context;
};

• export it then import AppUserProvider in layout.tsx

        <AppUserProvider>
         <div className="select-none dark:bg-slate-800/80">
           <Header />
             {children}
         </div>
       </AppUserProvider>

• and where you want to use the context import useAppUserGlobalContext have to use use client in that page.tsx

import { useSupabaseGlobalContext } from "../../hooks/supabaseProvider";