Setting up Next.js 13 with Prisma and SQLite

In this tutorial, we will demonstrate how to set up a Next.js 13 application with Prisma as the ORM and SQLite as the database.

Prerequisites

• Node.js
• npm

Step 1: Creating a Next.js application

First, let's create a new Next.js application using the create-next-app command:

npx create-next-app my-app --yes

This command will create a new Next.js application in the my-app directory. When prompted, choose No for TypeScript and No for the experimental app/ directory.

Next, change into the project directory:

cd my-app

Step 2: Setting up SQLite

To set up a SQLite database for our Next.js application, we need to install the sqlite3 package and create a new dev.db file:

npm install sqlite3

Step 3: Setting up Prisma

Next, we need to install the Prisma and initialize a new Prisma project:

npm install prisma --save-dev && prisma init

This will initialize a new Prisma project in our application directory. Then, we can paste the following code into the schema.prisma file:

datasource db {
  provider = "sqlite"
  url      = "file:./dev.db"
}

generator client {
  provider = "prisma-client-js"
}

model User {
  id    Int    @id @default(autoincrement())
  email String @unique
}

Don't forget to create dev.db file inside prisma folder

cd prisma
touch dev.db

Step 4: Pushing the Prisma schema and starting the Prisma Studio

Finally, we need to push our schema to the database and start the Prisma Studio to view the database:

prisma db push && prisma studio

Conclusion

Congratulations, you have successfully set up a Next.js 13 application with Prisma as the ORM and SQLite as the database. You can now use Prisma to query the SQLite database in your Next.js application.