How to resolve the error “PrismaClient is unable to be run in the browser” in Next.js

While working on a Next.js website, I recently encountered the error message: “PrismaClient is unable to be run in the browser.” This issue arose after I commented out a single line of code within the getStaticProps() method of my page file.

In this particular line of code, I invoked a method from my Prisma instance, which I had previously imported at the top of the page file. Next.js determines which code to utilize for the backend by analyzing the code within getStaticProps(), excluding it from shipment to the frontend.

By uncommenting or removing the line that utilized Prisma within getStaticProps(), I was able to prevent Next.js from including Prisma in the frontend code, ultimately resolving the “PrismaClient is unable to be run in the browser” error.

Furthermore, it is important to note that getStaticProps() is only executed for page routes, rather than other components. Consequently, if this error is encountered within a component, it is necessary to transfer the corresponding logic to the page route component.

tags: [“Next.js”, “Prisma”, “error handling”]