I followed the clerkjs docs and this is the middleware.ts file :
middleware.ts file

and this is the code for the page.tsx which is server component

import { getUserByClerkId } from "@/lib/actions/user/user.get.action";
import { TUser } from "@/types/models";
import { auth } from "@clerk/nextjs/server";
import { redirect } from "next/navigation";
import React from "react";

const StoriesPage = async () => {
  const { userId } = auth();

  if (!userId) return redirect("/sign-in");

  let user: TUser | null = null;

  try {
    const { statusCode, message, data } = await getUserByClerkId(userId);

    if (statusCode !== 200) throw new Error(message);

    user = data as TUser;
  } catch (error: any) {
    console.error(error);
  }

  return <div>StoriesPage</div>;
};

export default StoriesPage;

now the problem as u see when i try to acces to the loggedin user from a server component (page.tsx in this case) or a server action using the clerk helpers auth() or currentUser() i keep getting this error
enter image description here

if someone is using the latest versions of both clerk & next and he faced the same issue and fix it please let us now about the solution