React server components using Next.js and Prisma

January 31, 2021

Next.js has ported the react server components demo using redis as its backend store. Prisma has its own port of the react server components demo which uses SQLite.

In this post, I will show how to use Prisma to abstract database queries using its built in support for SQLite in a Next.js app.

To add Primsa to your Next.js project, run these commands in project's root directory.

  1. install Prisma CLI to your project:

    This should update your package.json devDependencies section

  2. initialize your Prisma setup with the following command:

    This will generate a prisma folder which has your schema definition and migrations. Create a dev.db file in this folder, this will be our sqlite database.

    SQLite does not support date, so will be storing updated_at as a String type.

  3. install Prisma client to your project:

    This should update your package.json dependencies section

  4. run migration on your sqlite dev database:

You could install Prisma Studio to view your data, comes very handy for sqlite.

PrismaClient is created in prisma.js under the libs top-level directory. This instance is shared across the API routes.

To retrive list of notes ordered by its id descending:

To create a new note:

React notes Next.js app using SQLite database with Prisma

You can find the source code for this project in github.


  • To use the authentication component in this demo, you need to create an Github OAuth app and configure the secrets in .env file in the root of the project.
  • It works with Node.js versions 14 LTS, not the latest 15. There is an open issue regarding this.
  • You cannot host this app in Vercel as they do not support SQLite which stores data locally.