Building a Fullstack Application With Next.js + Prisma + SQLite

TL;DR

My first thought on Next.js was "Oh it's just another front-end framework based on React" but I was wrong. Next.js is not just another front-end framework but it is a fullstack framework. Yes you heard it right, fullstack.

I have done some research about this topic and these 3 stacks suits me well for building a simple fullstack app. And I was blown away by how these 3 tech has a rich feature and gives me a huge boost in Developer Experience.

References

If you are interested in reading the documentation of each technology, then here's the link to the documentations:

• Next.js
• Prisma
• SQLite

Now let's go get our hands dirty.

Project Setup

First let's go with installing a fresh next.js app with this command.

$ npx create-next-app@latest

Then you can just answer the prompts but when it prompt you to use an App router, choose no as we are going to use the OG pages router 😉.

Next, we are going to setup the prisma so let's install prisma.

npm i -D prisma

After installing we will initialize prisma preconfigured with sqlite by running this command.

$ npx prisma init --datasource-provider sqlite

It will generate a prisma folder with schema.prisma file init. We will put our models inside the file so let's create some models

model User {
  id    Int     @id @default(autoincrement())
  email String  @unique
  name  String?
  posts Post[]
}

model Post {
  id        Int     @id @default(autoincrement())
  title     String
  content   String?
  published Boolean @default(false)
  author    User    @relation(fields: [authorId], references: [id])
  authorId  Int
}

We have created 2 models which are User and Post where these 2 models has relation to each other.

We have models, now we have to create the DB in order to do CRUD.

$ npx prisma migrate dev --name init

It will create a migration folder inside the prisma folder.

Great! Now you have a database already setup. Next step is to create an API to do CRUD.