'server-only' cannot be imported from a Client Component module. It should only be used from a Server Component.

[abdulazizkhatamov]

Summary

Repository: https://github.com/abdulazizkhatamov/unlimlogs

Issue: https://github.com/abdulazizkhatamov/unlimlogs/blob/435bd339c71ddb74b1f64f6aa7964b256c7fe0a6/src/components/sidebar/app-sidebar.tsx#L103

I was trying to implement authentication that is explained in Next.js documentation... but what should I do to get roles of current session in client components ?

Check /lib folder... there i created some functions to work with session...

Doc: https://nextjs.org/docs/app/building-your-application/authentication

[SidKH]

You cannot query prisma in client components.

but what should I do to get roles of current session in client components ?

Options:

1. Fetch in server components and pass data to client components when needed (good default)
2. Move data fetching to the API route and consume it by making requests from the client to this API route (sometimes needed)

In your particular case, I can't see why AppSidebar can not be a Server Component. Try to remove "use client" and fetch data directly there.

export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
  const admin = await getAdmin();

  ...
}

[abdulazizkhatamov]

https://gist.github.com/abdulazizkhatamov/c2aaff3639f7094afd3f33e644d4ed8f

I tried removing "use client" and tried with "use server" too, i got this error

[SidKH]

I see, that's because you are passing the icons as functions, and functions can not get passed from server to client components as they are not serializable.

In this case, you can keep AppSidebar a client component, and instead move data fetching to the parent server component.

In your case, app/cabinet/layout.tsx.
Fetch admin there and pass it to the sidebar.

export default async function Layout({
  children,
}: {
  children: React.ReactNode;
}) {
  const admin = await getAdmin();

  return (
    <SidebarProvider>
      <AppSidebar variant="inset" admin={admin} />
      ...
    </SidebarProvider>
  );
}

"use client"

...

export function AppSidebar({ admin, ...props }) {
  ...
}