A short tutorial about setting up a Next.js application with Prisma and SQLite. I decided to write this tutorial, because many of my other Next.js tutorials depend on a database and I want to reference it. Why this ORM and database? Prisma is a great tool to interact with databases and SQLite is a simple database to get started with.
If you donât have a Next.js application yet, you can create one on the command line:
Personally I like to use all the defaults when creating a new Next.js application. After your project is created, you can navigate into the project folder:
Next change the default page to something more minimalistic:
Finally you can start the Next.js application:
From here we will setup Prisma and SQLite before reading from the database.
SQLite is a database that is often used for its simplicity. Go ahead and install it:
When using SQLite, you donât have to set up an extra database, because SQLite is just a file in your project. This makes SQLite a great choice for starting out with a database.
Prisma is the most popular JavaScript/TypeScript ORM to interact with databases. Go ahead and install it for your project:
We can initialize Prisma with SQLite as the data source provider:
The prisma/schema.prisma file in the project should look similar to this one:
There should also be a .env file which holds the path to the SQLite database file:
Do not forget to create this database file, because Prisma will not do it for you:
Essentially this file is the SQLite database.
Prisma Migrations are needed to introduce new data in the database. For example, when you want to add a new table to the database, you can create it in the Prisma schema file. We will have a Post table in this example, but you can choose a different name or properties if you like:
When you want to migrate the database, you can run the following command:
Last, you can always check the database with Prisma Studio:
There you should see the empty Post table. Optionally you can seed this database with some initial data to see it later in your Next.js application.
We will need a Prisma Client instance in the application eventually to read and write from/to the database. Therefore, initialize a Prisma Client instance in the project:
When working with a framework like Next.js, it is important to use a singleton pattern for the Prisma Client instance. Otherwise, you may run into issues with hot reloading and multiple instances of the Prisma Client in development mode. Use the following code snippet to create a singleton for the Prisma Client instance:
There are more considerations to take into account when using Prisma in a serverless environment. You can find them in the official Prisma documentation.
With Nextâs App Router, every component is by default a React Server Component. This means that you can use the Prisma Client instance in these components to read from the database. Here is how you would read from the database on the root page:
Thatâs it. If you have done the database seeding in between, you should see the seeded data in your Next.js application.
You can find the repository for this tutorial over here . If you want to go beyond this, check out âThe Road to Nextâ and get on the waitlist!