Nextauthjs const { data: session } = useSession(); in SERVER SIDE Rendering in nextjs

Question

this is my code on page.tsx (Server side rendering)

 <NavigationBar session={session} />

and passing it to "use client" page using

const NavigationBar = ({ session }: any) => {}

How to avoid this error I still want my page.tsx as serverside rendering

app/page.tsx (17:38) @ useSession

  15 | export default function Home() {
  16 | 
> 17 | const { data: session } = useSession();
     |                                    ^
  18 | 
  19 | 
  20 | return (

Hi Yilmaz I don't want to use "use client" in my home (page.tsx) file — erwin, Apr 16 '23 at 03:58

score 2 · Accepted Answer · answered Apr 17 '23 at 01:31

useSession is react hook. Hooks can be used only in client-side components. The hook is a function that is hooked into the react lifecycle. If you want to use server component, you have to use

import { getServerSession } from "next-auth";

const ServerComponent = async () => {
  const session = await getServerSession(authOptions);
  return ()
}

for auth options I explained here: How do I use next auth getServerSession in next js 13 beta server component in app directory

Nextauthjs const { data: session } = useSession(); in SERVER SIDE Rendering in nextjs

1 Answers1