Using ORM with Next.js | Updated 2024

41

Integrating an Object-Relational Mapping (ORM) library with Next.js can simplify database interactions, making it easier to work with data in a more structured and intuitive way. This article will guide you through setting up and using an ORM in a Next.js application, using Prisma as our ORM of choice.

Prerequisites

Before you begin, ensure you have the following:

• Node.js and npm installed on your machine.
• Basic understanding of Next.js and databases.
• A database to connect to (e.g., PostgreSQL, MySQL, SQLite).

Steps for Using ORM with Next.js

Step 1: Create a Next.js Project

First, create a new Next.js project if you don’t already have one. Open your terminal and run:

npx create-next-app@latest next-orm-app
cd next-orm-app

Step 2: Install Prisma

Prisma is a popular ORM for Node.js and TypeScript that helps you intuitively interact with your database.

Install Prisma and its dependencies

Run the following commands to install Prisma and initialize it in your project:

npm install prisma --save-dev
npm install @prisma/client
npx prisma init

The prisma init command will create a prisma directory with a schema.prisma file inside it.

Step 3: Configure the Database

Edit the prisma/schema.prisma file to define your database connection and schema.

Example Schema

For this example, we’ll use a simple PostgreSQL database. Update the datasource block in schema.prisma:

// prisma/schema.prisma

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

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

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

Set the Database URL

Create a .env file in the root of your project and add your database connection string:

DATABASE_URL="postgresql://user:password@localhost:5432/mydatabase"

Replace user, password, localhost, and mydatabase with your actual database credentials and name.

Step 4: Migrate the Database

Run the following command to create the database schema based on your Prisma model definitions:

npx prisma migrate dev --name init

This command will generate the necessary SQL to create the User table and apply it to your database.

Step 5: Generate Prisma Client

After defining your schema and migrating your database, generate the Prisma client:

npx prisma generate

This command generates a Prisma client based on your schema, which you can use to interact with your database.

Step 6: Create API Routes to Interact with the Database

Next.js API routes provide a way to create serverless functions that interact with your database.

Create a User API Route

Create a new file named users.js inside the pages/api directory:

// pages/api/users.js

import { PrismaClient } from '@prisma/client';

const prisma = new PrismaClient();

export default async function handler(req, res) {
  if (req.method === 'GET') {
    const users = await prisma.user.findMany();
    res.status(200).json(users);
  } else if (req.method === 'POST') {
    const { name, email } = req.body;
    const newUser = await prisma.user.create({
      data: { name, email },
    });
    res.status(201).json(newUser);
  } else {
    res.status(405).json({ message: 'Method Not Allowed' });
  }
}

This route handles GET requests to fetch all users and POST requests to create a new user.

Step 7: Test the API Routes

Start the Development Server

Start your Next.js development server:

npm run dev

Test the GET Route

Open your browser and navigate to http://localhost:3000/api/users. You should see an empty array or a list of users if you’ve already added some.

Test the POST Route

Use a tool like Postman or curl to test the POST route. Here’s an example using curl:

curl -X POST http://localhost:3000/api/users -H "Content-Type: application/json" -d '{"name": "John Doe", "email": "john.doe@example.com"}'

You should receive a response with the newly created user’s details.

Step 8: Use Prisma in Your Next.js Pages

You can now use Prisma in your Next.js pages to fetch and display data.

Fetch Data on the Server-Side

Edit pages/index.js to fetch data from the database using getServerSideProps:

// pages/index.js

import { PrismaClient } from '@prisma/client';

const prisma = new PrismaClient();

export async function getServerSideProps() {
  const users = await prisma.user.findMany();
  return { props: { users } };
}

export default function Home({ users }) {
  return (
    <div>
      <h1>Next.js with Prisma</h1>
      <ul>
        {users.map((user) => (
          <li key={user.id}>{user.name} ({user.email})</li>
        ))}
      </ul>
    </div>
  );
}

This code fetches all users from the database and passes them as props to the page component.

Step 9: Deploy Your Next.js App

To deploy your Next.js application with Prisma, ensure your database is accessible from your deployment environment. If you’re using Vercel, you’ll need to configure environment variables for your database connection.

Configure Environment Variables

Create a .env.local file in the root of your project and add your database connection details:

DATABASE_URL="postgresql://user:password@localhost:5432/mydatabase"

Deploy to Vercel

Commit your changes to a GitHub repository and deploy your Next.js application to Vercel. Vercel will automatically detect your environment variables and configure your deployment.

Conclusion

Integrating an ORM like Prisma with Next.js simplifies database interactions, providing a more structured and intuitive way to work with your data. By following this guide, you’ve learned how to set up, use, and deploy Prisma in a Next.js application.

For more updates on programming trends and tutorials, visit blogsea.net regularly.

Using ORM with Next.js – FAQs