0

I am trying to only show data where the "Heading" is the same as the logged-in user's name. I'm using Next.js and I'm trying to server render the data from my Prisma database, but when I try to filter the data to only show "Segments" where the "Heading" is the same as the currently logged-in user it throws an error:

Server Error

TypeError: Cannot read properties of null (reading 'useContext')

I am using Next-Auth for user authentication and previously I have use this method to access the currently logged in user's data:

import { useSession } from "next-auth/react";
.
.
.
const { data: session } = useSession();
.
.
.
<div>User name: {session.user.name}</div>

But when I use getServerSideProps() that method doesn't work. This is what I tried so far:

export async function getServerSideProps() {
  const { data: session } = useSession();

  const segments: Segment[] = await prisma.segment.findMany({
    where: {
      Heading: session.user.name,
    },
  });
  return {
    props: {
      initialSegments: segments,
    },
  };
}

But it shows me the error shown above.

Luka Vilagoš
  • 9
  • 3

1 Answers1

1

useSession is unavailable on the server side according to next-auth's docs.

You may be able to use unstable_getServerSession(), however do note that it's experimental and its API may change in the future (as noted in the docs).

Axiumin_
  • 2,107
  • 2
  • 15
  • 24