Using Session in Server Rendered Pages with Next.js 14

[aashi0001]

Question:
With the removal of server-side props in Next.js 14, developers who relied on them for accessing session data in server-rendered pages are facing challenges. In Next.js 13, server-side props provided a straightforward way to pass context or access the request/response cycle to retrieve session data. How can we achieve the same functionality in Next.js 14 since server-side props are removed ? Are there alternative approaches or best practices for managing session data in server-rendered pages in the latest version of Next.js?

Code Example:

// pages/index.js

import { getSession } from 'next-auth/client';

export async function getServerSideProps(context) {
  const session = await getSession(context);

  // Access session data here
  console.log(session);

  return {
    props: {
      // Pass session data to the component
      session,
    },
  };
}

export default function HomePage({ session }) {
  return (
    <div>
      {session ? (
        <p>Welcome, {session.user.name}!</p>
      ) : (
        <p>Please log in to access this page.</p>
      )}
    </div>
  );
}

Looking forward to hearing your insights and experiences with this!

[SidKH]

Hi 👋

With the removal of server-side props in Next.js 14, developers who relied on them for accessing session data in server-rendered pages are facing challenges

You can continue using the Pages Router and getServerSideProps in Next.js 14.

If you want to switch to App Router, you can get a session directly in a server component with getServerSession from next-auth.

https://next-auth.js.org/configuration/nextjs#in-app-router