How to Build a Full-Stack Nextjs Prisma CRUD App: A Step-by-Step Guide

Building a full-stack application can be a daunting task, especially when dealing with complex relational databases and server-side rendering. But what if there was a way to simplify this process? Enter Next.js and Prisma, two powerful tools that can help you build a robust CRUD (Create, Read, Update, Delete) app with ease.

This blog will walk you through the process, step-by-step, to help you create a full-stack Next.js Prisma CRUD app.

Project Setup and Initialization with Env File

To kickstart your project, you’ll need to create a new Next.js project. This can be done using the create-next-app command, which sets up a new Next.js application with a default layout and structure, saving you the hassle of setting up everything from scratch.

Copy
npx create-next-app@latest

Next, you’ll need to install Prisma in your Next.js project. Prisma is an open-source database toolkit that simplifies database access and data modeling.

Copy
npm install prisma

After installing Prisma, initialize it by running the following command. This creates a new prisma folder in your project with a schema.prisma file.

Copy
npx prisma init

Lastly, update the .env file with your database connection string. This file is used to store environment variables, such as your database connection information.

Copy
DATABASE_URL="postgresql://user:password@localhost:5432/mydb?schema=public"

In the schema.prisma file, define the datasource db, specifying the database provider and connection URL.

Database Configuration with Prisma Schema File

Once your project is set up, configure your database by defining your database schema and models in the Prisma schema file. The Prisma schema file is a declarative representation of your database schema and the data model of your application. The Prisma client is generated based on this schema file, enabling seamless interaction with your database provider.

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

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

After defining your database schema and models, create your database using the CREATE DATABASE command in your database management system. Then, run the following command to create the database tables based on your Prisma schema file.

Copy
npx prisma migrate dev --name init

Building the CRUD App with Next.js and Prisma Client

With your database set up, you can now start building your CRUD app. This involves creating API routes for CRUD operations, using the Prisma client to interact with the database, and creating pages for displaying and editing posts.

First, create API routes for CRUD operations in the pages/api directory. Each file in this directory is treated as an API route, and you can define the GET, POST, PUT, and DELETE operations in these files.

Copy
// pages/api/posts.js
import prisma from '../../lib/prisma'

// GET /api/posts
export default async function handle(req, res) {
  const posts = await prisma.post.findMany()
  res.json(posts)
}

Use the Prisma client to interact with the database:

Copy
const posts = await prisma.post.findMany()

Next, create pages for displaying and editing posts in the pages/post directory. These pages use the getServerSideProps function to fetch data at request time, and they use the hook to get the current route and redirect to the list of posts after creating or editing a post.

Security Considerations

When building a CRUD application with Next.js and Prisma, it’s essential to consider security best practices to protect your application and data. Here are some security considerations to keep in mind:

• Validate User Input: Always validate user input to prevent SQL injection attacks and ensure data consistency. You can use a validation library like to define and enforce input schemas.

• Use Secure Database Connections: Ensure your database connection string in the file is secure to prevent unauthorized access.

• Implement Authentication and Authorization: Use a library like to implement authentication and authorization. This ensures that only authorized users can access and modify data.

• Use HTTPS: Always use HTTPS to encrypt data transmitted between the client and server.

• Regularly Update Dependencies: Keep your dependencies up to date, including Prisma and Next.js, to ensure you have the latest security patches and features.

Error Handling and Debugging

Error handling and debugging are crucial aspects of building a robust and reliable CRUD application with Next.js and Prisma. Here are some best practices to follow:

• Use Try-Catch Blocks: Wrap your database operations, API calls, and other critical functions in try-catch blocks to catch and handle errors gracefully.

• Log Errors: Use a logging service like or to monitor and debug errors in your application.

• Use Prisma’s Error Handling Features: Prisma provides built-in error handling features, such as error codes and error messages.

• Test Thoroughly: Use tools like and to write and run tests.

• Use Debugging Tools: Utilize tools like Chrome DevTools or the Node.js Inspector for debugging.

Testing, Deployment, and Performance Optimization

After building your CRUD app, you'll need to test it, deploy it, and optimize it for performance. You can test your app by running:

You can view the tables in your PostgreSQL database using the command.

For deployment, you can use a service like Vercel or Netlify, which provide a seamless deployment experience for Next.js apps.

To improve SEO and user experience, use server-side rendering (SSR) to pre-render pages on the server, or static site generation (SSG) to pre-render

at build time.

By following this guide, you should now have a fully functional full-stack Next.js Prisma CRUD app. Remember, practice makes perfect. So, keep building and refining your skills.

DATABASE_URL="postgresql://user:password@localhost:5432/mydb?schema=public&sslmode=require"

// pages/post/[id].js
import { useRouter } from 'next/router'
import prisma from '../../lib/prisma'

export default function Post({ post }) {
  const router = useRouter()

  async function deletePost(id) {
    await fetch(`/api/post/${id}`, { method: 'DELETE' })
    router.push('/')
  }

  return (
    <div className="post-container">
      <h2 className="post-title">{post.title}</h2>
      <p className="post-content">{post.content}</p>
      <button className="delete-button" onClick={() => deletePost(post.id)}>Delete</button>
    </div>
  )
}

export async function getServerSideProps({ params }) {
  const post = await prisma.post.findUnique({
    where: { id: Number(params.id) },
  })
  return { props: { post } }
}

import { z } from 'zod'

const postSchema = z.object({
  title: z.string().min(1),
  content: z.string().optional(),
})

async function createPost(req, res) {
  try {
    const validatedData = postSchema.parse(req.body)
    const post = await prisma.post.create({ data: validatedData })
    res.status(201).json(post)
  } catch (error) {
    res.status(400).json({ error: error.message })
  }
}

import NextAuth from 'next-auth'
import Providers from 'next-auth/providers'

export default NextAuth({
  providers: [
    Providers.Google({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
  ],
  database: process.env.DATABASE_URL,
})

async function getPost(req, res) {
  try {
    const post = await prisma.post.findUnique({ where: { id: Number(req.query.id) } })
    if (!post) {
      return res.status(404).json({ error: 'Post not found' })
    }
    res.json(post)
  } catch (error) {
    res.status(500).json({ error: 'Internal Server Error' })
  }
}

import * as Sentry from '@sentry/node'

Sentry.init({ dsn: process.env.SENTRY_DSN })

async function createPost(req, res) {
  try {
    const post = await prisma.post.create({ data: req.body })
    res.status(201).json(post)
  } catch (error) {
    Sentry.captureException(error)
    res.status(500).json({ error: 'Internal Server Error' })
  }
}

async function createUser(req, res) {
  try {
    const user = await prisma.user.create({ data: req.body })
    res.status(201).json(user)
  } catch (error) {
    if (error.code === 'P2002') {
      res.status(400).json({ error: 'Email already exists' })
    } else {
      res.status(500).json({ error: 'Internal Server Error' })
    }
  }
}

npm run dev

psql -U username -d mydatabase

export async function getStaticProps() {
  const posts = await prisma.post.findMany()
  return {
    props: { posts },
  }
}