我正在尝试创建一个Header组件，它从数据库中获取导航链接，并显示当前哪个是活动的。
我使用Next.js 13（应用程序路由器）和Prisma作为ORM。要获取当前路径名，我必须包含'use client'，否则我无法获取路径名，因为**“usePathname only works in Client Components "。但是，当我包含'use client'时，我无法使用PrismaClient，因为我得到一个错误，显示“PrismaClient is unable to be run in the browser"。我如何将这两个一起使用？
下面是我在Header.tsx**组件中使用的代码：

'use client'
import Link from 'next/link'
import { usePathname } from 'next/navigation'
import { PrismaClient } from '@prisma/client'

const prisma = new PrismaClient()

export async function getCategories() {
  const categories = await prisma.categories.findMany()
  return categories
}

export default async function Header(){
  const pathname = usePathname()
  const categories = await getCategories()
  return(
    <header>
      {categories.map((category) => (
        <Link href={"/"+category.slug} className={pathname == "/"+category.slug ? "menu-item item-active" : "menu-item"}>
           <span>{category.name}</span>
        </Link>
      ))}
    </header>
  )
}

字符串