NextJS App Router - Database Using Prisma

The current state of NextJS, which is NextJS 14 makes the App Router stable and ready to use for production. The App Router embrace the React Server Component from React which allows developer to interact with database or backend logic directly in React component.

This will make a little bit difficult to configure the Prisma with current NextJS App Router since most of the tutorial and documentation out there still using the Pages Router to interact with Prisma.

In this article, I will briefly go through step by step how to set up Prisma in latest NextJS App Router project.

Prisma Installation

Before we start installing Prisma, make sure you have a NextJS project with App Router configuration ready. If you have do not have any NextJS project ready, can follow the steps on official NextJS website.