Next.js is a React-based framework that offers server-side rendering features. It runs on the server and renders pages at build time, this allows the server to serve the content ahead of time and allows you to build high-performant web applications.
Prisma on the other hand, is an Object-Relational Mapper (ORM) for Node.js. It provides an abstraction for interacting with a database directly. Prisma generates type-safe database schemas that map to your database and generates the actual database queries.
In this article, we will create a todo application with Next.js and Prisma to demonstrate how to manage database operations with Prisma.
To follow through in this article, it is essential to have the following:
Next.js allows you to scaffold a basic web application. This allows to progressively work and scale up on any application. To set up a Next.js application, create a project folder where you want the application to live. Open the folder using a text editor such as Visual Studio Code, then open up a terminal from vsCode and run the following create-next-app command:
Once you run your create-next-app command a prisma-next-todos-app folder will be created. This directory hosts the Next.js application that we will use to build a todos app using the Prisma ORM.
To test this application, change the directory to the newly created directory:
Then run the application locally:
Open http://localhost:3000, and you should be served with a Hello world version on Next.js.
To add Prisma to any project, you first need to initialise the Prisma client for your application. So let’s do that.
Run the following command to initialise Prisma with PostgreSQL (here you can still use MySQL, SQLite, SQL server, or MongoDB or the same) as the data source:
This command will create:
Prisma allows you to use PostgreSQL, MySQL, SQLite, SQL server, or MongoDB. In this guide, we will use PostgreSQL database to communicate with Prisma.
Based on your database of choice, you need a connection URL that serves the database. If the database is locally installed, you need the local database connection string. Prisma will use URL to connect and communicate with your database.
Here, we are using a local PostgreSQL database. Therefore, ensure you use the PostgreSQL database connection URL as follows:
To use this connection URL, ensure you replace:
Once you have updated the above URL, copy and add it to the .env file as the new DATABASE_URL variable. I.e.,
Prisma uses a model to create a database table schema. This model contains all the fields and their properties that a database should have. Let's create a Todo model to use in this example.
Inside the schema.prisma file, configure the Todo model as follows:
This will instruct PostgreSQL to create a Todo table inside the todos database set in the previous database URL.
Prisma needs to map the above data model to the database schema. For that, run the below command:
Note: While running the above command, ensure your database server is up and running. In this case, we are using the PostgreSQL database. Therefore, ensure the PgAdmin is up and running.
As a result of the above command, a migrations folder will be created inside the prisma directory. The migrations folder will host .sql files that will have the command of creating the Todo table.
At this point, your database is now in sync with the schema defined in the schema.prisma file. If you refresh your database, a todos db with a Todo table will be presented with the fields set in the Prisma model used to create the database schema.
To generate a client from which we will create our queries, run the following command:
This command generates a Prisma client that allows you to work with Prisma in our project. In the Next.js project root folder (prisma-next-todos-app), create a lib directory. In it, add a prisma.ts file which will configure the Prisma client as below:
We will use the Prisma Client to connect to the Next.js Prisma app. Let's now dive into the Next.js and consume the Prisma setup we have created.
In the pages/api folder, create a todo folder. Inside the todo folder, create an index.ts and a [id].ts file.
The index.ts file will host the creating a todo route while the [id].ts will host mutation routes such as updating and deleting todo.
Here, we are using NextApi to execute POST requests and responses. A POST method will add a new todo to the database using the Prisma Client. Therefore prisma.todo.create() will read the request body and post the data to the database using Prisma.
Operations such as PUT and DELETE are used to manipulate an already existing data record. In this case, each todo record is referenced by a unique id. To execute PUT or DELETE operations, Prisma will look to the id of the todo and modify the correct todo record referenced by that specific id.
The application user interface is defined by components. Next.js uses components to set up different sections of a web application. Here we’ll create the following components:
To set up the above components, create a components directory. Inside the components directory, we will have the following files based on each component:
Here, we are creating a Navigation bar that displays the application. It creates a basic navigation element to interact with the application routes using the Next.js useRouter() method. A click on these className (S) will redirect the user to the application home page. To format the above bar, create a Header.module.css file inside components directory. Then add the following .nav styles for the navigation bar:
The Layout component runs a container that wraps the Header component to the main application. It runs the Header component as its child. To style the component, create a Layout.module.css file and add the following CSS code:
We are displaying a list of todos using Next.js. Therefore, we need a component that will render the todos on our web app. The above Todo component will create and render a todoCard.
This card component will serve dynamic data from the server. Consequently, we need TodoProps and useState for the todos data. Once we get the response to this data, we will render it to the web app using the todoCard.
Each todoCard will display:
To style the above component, create a Todo.module.css file and add the following styling:
Likewise, we need to add todos to the database using Next.js and the Prisma setup. The above AddTodoForm component will create a form that will allow you to insert todos values. A click on the Add Todo will send the data to the database using Prisma. To style the above component, create a Form.module.css file and add the following styling:
Let's now display the todos based on the component we have created. In pages/index.tsx:
Inside the styles/Home.module.css file, add the following style for the addTodo button:
Start your development server by running this command on your terminal:
Proceed to the URL yielded: i.e: http://localhost:3000. Your home page should be similar to:
Once you click on add todo, you should have the following:
These changes will be represented in your database as well.
In this tutorial, we have learned how to run Prisma on a Next.js server. We have used Prisma to communicate with the database. Finally, built a Next.js application that leverages this setup to perform database operations.
We hope you found this tutorial helpful. Happy coding!
You can find the source code for the project on this GitHub repository.
Get visual proof, steps to reproduce and technical logs with one click
Try Bird on your next bug - you’ll love it
Julie, Head of QA
Try Bird later, from your desktop