Error message "PrismaClient is unable to be run in the browser"

Curriculum Help
1

Hi All,

I would like to seek some help here..

I know that PrismaClient is not able to run on the Client side but would like to seek some advice on how to overcome the issue below.

I am currently using Nextjs framework app router. I would like to render dynamic pages.

Current file paths as follows:

src/lib/drivers.js

import prisma from '@/app/config/database';

export async function getDriver({ params }) {
  try {
    const driver = await prisma.TO.findUnique({
      where: {
        name: params.name
      }
    });

    if (!driver) {
      console.log('Driver not found');
      return null;
    }

    return driver;

  } catch (err) {
    console.log(`Error fetching driver: ${err}`);
    return null; 
  }
}

src/app/drivers/[name]/page.js

'use client'

import Header from '@/components/navbar.component';
import { useParams } from 'next/navigation'
import { getDriver } from '@/lib/drivers';
  
  export default async function Driver() {
    const params = useParams();
    const driver = await getDriver({ params });
  
    return (
      <>
        <Header />
        <>
          <main className="p-4 md:p-10 mx-auto max-w-7xl">
            <h1>{driver.name}</h1>
            <h1>{driver.contact}</h1>
          </main>
        </>
      </>
    )
  }
2

Managed to find a solution for this to get dynamic routing using Nextjs app router.

src/api/drivers/[name]/route.js

import { NextResponse } from "next/server";
import prisma from '@/app/config/database';

export async function GET(req, { params }) {
    try {
        const driver = await prisma.TO.findUnique({
            where: {
                name: params.name
            }
        })
  
      if (!driver) {
        return new NextResponse.JSON({ message: "No driver found" });
      }

      return new NextResponse(JSON.stringify(driver, null, 2));

    } catch (error) {
        return NextResponse.error(`Error getting driver: ${error}`);
    }
  }

refactoring my fetching functions for future use
src/lib/drivers.js

export async function getAllDrivers(pageSize, page) {
  const data = await fetchDrivers()
  return {
    pageCount: 1,
    drivers: data,
  }
}

export async function getDriver(name) {
  const url = `${NEXT_PUBLIC_NEXTAUTH_URL}/api/drivers/${name}`;
  console.log(`Fetching driver: ${url}`);
  const response = await fetch(url);
  if (!response.ok) {
    throw new Error(`Error fetching driver data ${response.status} for ${url}`);
  }
  return response.json();
}

async function fetchDrivers() {
  const url = `${NEXT_PUBLIC_NEXTAUTH_URL}/api/drivers`
  console.log("fetchDrivers:", url);
  const response = await fetch(url);
  if (!response.ok) {
    throw new Error(`Error fetching drivers data ${response.status} for ${url}`);
  }
  return response.json();
}

src/app/drivers/[name]/page.jsx

import Header from '@/components/navbar.component';
import { getDriver } from '@/lib/drivers'
import { getAllDrivers } from '@/lib/drivers'
// import checkAdmin from '@/lib/checkAdmin';
// import { Card, Flex, Grid } from '@tremor/react';
// import { DeleteButton, AmendButton } from '@/components/button.component'
export const revalidate = 30;

export async function generateMetadata({ params: { name } }) {
  const driver = await getDriver(name);
  return driver ? { title: driver.name } : notFound();
}

export async function generateStaticParams() {
  const { drivers } = await getAllDrivers()
  return drivers.map(driver => ({ name: driver.name }))
}


export default async function Driver({ params: { name } }) {

  const driver = await getDriver(name)

  return (
    <>
      <Header />
      <>
        <main className="p-4 md:p-10 mx-auto max-w-7xl">
          <h1>{driver.name}</h1>
          <h1>{driver.contact}</h1>
        </main>
      </>
    </>
  )
}