why getServerSession returns null when I fetch data from server(page.jsx) in nextjs?

[thehadikarimi]

Hello.
I use next-auth 4.24.11 in my nextjs(app-router) project 15.1.3. I realized that when I send request from server component(page.jsx) to api route, getServerSession returs null but when I send request from client component, there is no problem.

here is my page.jsx code

import { notFound } from "next/navigation";

import UserDetailsPage from "@/components/templates/UserDetailsPage";

async function fetchUser(id) {
  const res = await fetch(
    `${process.env.NEXT_PUBLIC_API_BASE_URL}/users/${id}`,
  );
  if (!res.ok) return null;
  return res.json();
}

async function Page({ params }) {
  const { userId } = await params;
  const user = await fetchUser(userId);
  if (!user) notFound();
  return <UserDetailsPage userId={userId} />;
}

export default Page;

and this is my route.js code

import { getServerSession } from "next-auth";

import User from "@/models/User";

import { DB_IsConnected } from "@/utils/DB";
import { isValidObjectId } from "mongoose";

export async function GET(request, { params }) {
  const isConnected = await DB_IsConnected();
  if (isConnected === "not-connected") {
    return Response.json(
      {
        status: 500,
        data: { message: "Error in connecting to db." },
      },
      { status: 500 },
    );
  }

  const session = await getServerSession();
  console.log(session);
  if (!session) {
    return Response.json(
      { status: 401, data: { message: "Please log in first." } },
      { status: 401 },
    );
  }

  const { userId } = await params;
  const isValidId = isValidObjectId(userId);

  const user = isValidId && (await User.findOne({ _id: userId }));

  if (!user) {
    return Response.json(
      {
        status: 404,
        data: { message: "User not found." },
      },
      { status: 404 },
    );
  }

  const filterUserData = {
    _id: user._id,
    role: user.role,
    name: user.name,
    email: user.email,
    payment: user.payment,
  };

  return Response.json(
    { status: 200, data: { user: filterUserData } },
    { status: 200 },
  );
}

and this is a client component code

"use client";

import api from "@/config/axios";
import { useEffect } from "react";

function UserDetailsPage({ userId }) {
  useEffect(()=> {
    api
    .get(`/users/${userId}`)
    .then((res) => console.log(res))
    .catch((err) => console.log(err));
  },[])

  return <div>UserDetailsPage</div>;
}

export default UserDetailsPage;