Jesse Hall - codeSTACKr for MongoDB

Posted on Apr 1 • Edited on Apr 2

10X Your Development Speed: Prisma + MongoDB + Next.js Ultimate Stack

#javascript #typescript #nextjs #webdev

Today, we're looking at Prisma ORM with MongoDB—a really useful combo for building database-driven apps. MongoDB is already a great database choice for JavaScript developers, with several ways to work with it, from the native driver to Mongoose to type-safe ORMs like Prisma.

So why pick Prisma? I've personally used all of these approaches, and I want to share what makes Prisma worth considering for your MongoDB projects.

In this tutorial, I'll walk you through a practical workflow for using Prisma ORM with MongoDB. You'll see how to build a full-stack Next.js application with this combination, and how Prisma Accelerate can make MongoDB performance even better through connection pooling and caching.

For context, I've been building web apps for over 20 years, so I'll be sharing practical tips from my own experience.

The tech stack

Before we get into the code, let's quickly go over what developers typically get when working with MongoDB:

A general purpose, flexible database that adapts easily as your schema changes
Document-based storage that works naturally with JavaScript objects
Powerful query options through the aggregation framework
Solid performance across different workloads

Prisma ORM adds these helpful features that work well with MongoDB's strengths:

Complete type safety for your database operations
Clear schema management with automatic validations
Simple handling of relationships between collections
A query engine that creates optimized MongoDB operations

When we add Prisma Accelerate to the mix, which is a fully managed global connection pool and edge-based caching layer for your existing database, we get these extra benefits:

Serverless connection pooling without managing extra infrastructure
Much faster cold starts in serverless environments
Better response times with caching of query results
Global edge distributed caching layer for quicker database access
Less connection load on your MongoDB deployment

Let me show you how Prisma ORM changes MongoDB development by building a simple but complete user management system with Next.js 15 (App Router), Prisma ORM, MongoDB, and Tailwind CSS with shadcn/ui components.

If you prefer to watch, here's the video version:

Outline & prerequisites

Here's what we'll cover:

Setting up MongoDB Atlas and connecting Prisma ORM
Defining our data model for users, posts, and comments
Generating Prisma Client
Building API routes with Prisma ORM
Creating a front end with Next.js and shadcn/ui
Expanding app functionality with posts and comments
Scaling with Prisma Accelerate
Bonus at the end!

Prerequisites:

Node.js 20+
MongoDB Atlas account
Prisma Data Platform account (for Prisma Accelerate)

Prisma ORM + MongoDB project setup

Let's start by setting up our project. I'll create a new Next.js application and add Prisma ORM.

# In your terminal, create a new Next.js project
npx create-next-app prisma-mongodb-demo
cd prisma-mongodb-demo

# Install Prisma dependencies
npm install -D prisma

# Initialize Prisma in your project
npx prisma init

Now, let's configure our MongoDB connection. I've already set up a MongoDB Atlas cluster. If you haven't, follow the Getting Started with Atlas guide. Make sure to:

Create a database user with read/write permissions.
Add your IP address to the network access list.
Get your connection string from the "Connect" button.

First, we'll update our prisma/schema.prisma file (which was created by the prisma init command) with our MongoDB connection:

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

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

For our .env file in the root of your project, we'll add:

DATABASE_URL="mongodb+srv://username:[email protected]/mydb?retryWrites=true&w=majority"

Make sure to replace username, password, cluster0.mongodb.net, and mydb with your actual MongoDB Atlas credentials. Pay special attention to the "mydb" part of the URL—this is the database name that Prisma ORM will use. If the database doesn't exist yet, MongoDB will create it automatically when Prisma ORM first connects.

Data modeling with Prisma ORM

With Prisma ORM, you get a clear, declarative way to define your MongoDB collections and their relationships.

We're still in the prisma/schema.prisma file. Now, we'll add our data models:

// add these models below the existing blocks
model User {
  id        String   @id @default(auto()) @map("_id") @db.ObjectId
  email     String   @unique
  name      String?
  posts     Post[]
  comments  Comment[]
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
}

model Post {
  id        String   @id @default(auto()) @map("_id") @db.ObjectId
  title     String
  content   String?
  published Boolean  @default(false)
  author    User     @relation(fields: [authorId], references: [id])
  authorId  String   @db.ObjectId
  comments  Comment[]
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
}

model Comment {
  id        String   @id @default(auto()) @map("_id") @db.ObjectId
  content   String
  post      Post     @relation(fields: [postId], references: [id])
  postId    String   @db.ObjectId
  author    User     @relation(fields: [authorId], references: [id])
  authorId  String   @db.ObjectId
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
}

This Prisma ORM schema defines how our data will be structured in MongoDB. Even though MongoDB has a flexible schema by nature, Prisma ORM helps us maintain consistent data structures in our application.

We've defined three collections (called "models" in Prisma ORM): User, Post, and Comment.
For each model:
- The @id decorator marks the primary key field.
- @default(auto()) automatically generates a MongoDB ObjectId.
- @map("_id") tells Prisma ORM to map this field to MongoDB's default _id field.
- @db.ObjectId specifies the MongoDB-specific data type.
We've established relationships between our models:
- A User can have many Posts and Comments.
- A Post belongs to one User and can have many Comments.
- A Comment belongs to one User and one Post.
Relationship fields like posts and comments in the User model use arrays (Post[]) to indicate they can contain multiple related records.
We're using special field types:
- String? means an optional string (the name can be null).
- DateTime fields with @default(now()) automatically set creation timestamps.
- @updatedAt automatically updates the timestamp when a record changes.

The cool thing here is that Prisma ORM will generate TypeScript types from this schema, so we get full type safety when working with our database. It also takes care of setting up the right MongoDB indexes to make these relationships work properly.

Let's generate our Prisma Client and push our schema to MongoDB using the terminal:

npx prisma db push

This command will:

Create the collections in your MongoDB database (users, posts, and comments).
Set up the appropriate indexes for relationships and unique fields (like the unique index on email).
Generate Prisma Client tailored to your schema.

After running this command, you'll see confirmation that the collections and indexes were created successfully.

Setting up a singleton Prisma Client

Before we build our API routes, let's create a shared Prisma Client instance. This prevents multiple database connections in development and ensures efficient connection management.

Create a new file lib/prisma.ts:

import { PrismaClient } from '@prisma/client'

const prisma = new PrismaClient()

const globalForPrisma = global as unknown as { prisma: typeof prisma }

if (process.env.NODE_ENV !== 'production') globalForPrisma.prisma = prisma

export default prisma

Building API routes with server actions

Using the Next.js App Router, we can use Server Actions instead of traditional API routes. Server Actions are server functions that can be called directly from components. Let's create these actions to manage our data in a new file named app/actions.ts:

'use server';

import prisma from '@/lib/prisma';
import { revalidatePath } from 'next/cache';

// READ actions
export async function getUsers() {
  try {
    const users = await prisma.user.findMany({
      include: {
        posts: true,
        _count: {
          select: { comments: true, posts: true }
        }
      },
      orderBy: {
        createdAt: 'desc'
      }
    });

    return users;
  } catch (error) {
    console.error('Error fetching users:', error);
    throw new Error('Failed to fetch users');
  }
}

export async function getPosts(limit = 5) {
  try {
    const posts = await prisma.post.findMany({
      include: {
        author: true,
        comments: {
          include: {
            author: true
          },
          orderBy: {
            createdAt: 'desc'
          }
        },
        _count: {
          select: { comments: true }
        }
      },
      orderBy: {
        createdAt: 'desc'
      },
      take: limit
    });

    return posts;
  } catch (error) {
    console.error('Error fetching posts:', error);
    throw new Error('Failed to fetch posts');
  }
}

export async function getUserById(id: string) {
  try {
    const user = await prisma.user.findUnique({
      where: { id },
      include: {
        posts: {
          orderBy: {
            createdAt: 'desc'
          }
        },
        comments: {
          orderBy: {
            createdAt: 'desc'
          },
          take: 10
        },
        _count: {
          select: { comments: true, posts: true }
        }
      }
    });

    if (!user) {
      throw new Error('User not found');
    }

    return user;
  } catch (error) {
    console.error(`Error fetching user with ID ${id}:`, error);
    throw error;
  }
}

// CREATE actions
export async function createUser({ email, name }: { email: string; name?: string }) {
  if (!email) {
    throw new Error('Email is required');
  }

  try {
    const user = await prisma.user.create({
      data: {
        email,
        name,
      },
    });

    // Revalidate the home page to show the new user
    revalidatePath('/');

    return user;
  } catch (error: any) {
    // Handle duplicate email error
    if (error.code === 'P2002') {
      throw new Error('A user with this email already exists');
    }

    throw new Error('Failed to create user');
  }
}

// Post actions
export async function createPost({ 
  title, 
  content, 
  authorId, 
  published = false 
}: { 
  title: string; 
  content?: string; 
  authorId: string; 
  published?: boolean 
}) {
  if (!title || !authorId) {
    throw new Error('Title and author are required');
  }

  try {
    // Ensure the author exists
    const authorExists = await prisma.user.findUnique({
      where: { id: authorId }
    });

    if (!authorExists) {
      throw new Error('Author not found');
    }

    const post = await prisma.post.create({
      data: {
        title,
        content,
        published,
        author: {
          connect: { id: authorId }
        }
      },
      include: {
        author: true
      }
    });

    // Revalidate the home page to show the new post
    revalidatePath('/');

    return post;
  } catch (error) {
    console.error('Error creating post:', error);
    throw error;
  }
}

// Comment actions
export async function createComment({ 
  content, 
  postId, 
  authorId 
}: { 
  content: string; 
  postId: string; 
  authorId: string 
}) {
  if (!content || !postId || !authorId) {
    throw new Error('Content, post, and author are required');
  }

  try {
    // Ensure both the post and author exist
    const postExists = await prisma.post.findUnique({
      where: { id: postId }
    });

    const authorExists = await prisma.user.findUnique({
      where: { id: authorId }
    });

    if (!postExists) {
      throw new Error('Post not found');
    }

    if (!authorExists) {
      throw new Error('Author not found');
    }

    const comment = await prisma.comment.create({
      data: {
        content,
        post: {
          connect: { id: postId }
        },
        author: {
          connect: { id: authorId }
        }
      },
      include: {
        author: true,
        post: true
      }
    });

    // Revalidate the home page to show the new comment
    revalidatePath('/');

    return comment;
  } catch (error) {
    console.error('Error creating comment:', error);
    throw error;
  }
}

Here's a brief explanation of what the server actions code is doing:

The getUsers action fetches all users from the database and includes their posts and comment counts.
The getPosts action fetches the latest posts, including the author and comment counts.
The getUserById action fetches a single user by ID, including their posts, comments, and counts.
The createUser action creates a new user in the database.
The createPost action creates a new post in the database.
The createComment action creates a new comment in the database.

Building the user interface with server components

Now, let's leverage Next.js server components to build our UI. This approach moves data fetching to the server, reducing client-side JavaScript and improving performance. We'll start by editing the app/page.tsx file.

import UserForm from '@/components/UserForm';
import UserList from '@/components/UserList';
import { getUsers } from '@/app/actions';

export default async function Home() {
  // Server-side data fetching using our server actions
  const users = await getUsers();

  return (
    <main className="min-h-screen bg-gray-50 py-12">
      <div className="container mx-auto px-4 max-w-5xl">
        <h1 className="text-3xl font-bold mb-12 text-center text-gray-800">
          Prisma + MongoDB User Management
        </h1>

        <section className="mb-16">
          <div className="flex items-center mb-8">
            <div className="h-10 w-2 bg-blue-500 rounded-full mr-3"></div>
            <h2 className="text-2xl font-bold text-gray-800">Users</h2>
          </div>
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
            <UserForm />
            <UserList initialUsers={users} />
          </div>
        </section>
      </div>
    </main>
  );
}

You should have some red squiggles in your code now because we haven't created the client components yet. So let's create those now.

First, we’ll create components/UserForm.tsx:

'use client';

import { useState } from 'react';
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Label } from "@/components/ui/label";
import { toast } from "sonner";
import { useRouter } from 'next/navigation';
import { createUser } from "@/app/actions";

export default function UserForm() {
  const [email, setEmail] = useState('');
  const [name, setName] = useState('');
  const [loading, setLoading] = useState(false);
  const router = useRouter();

  const handleCreateUser = async () => {
    if (!email) {
      toast.error("Email is required");
      return;
    }

    setLoading(true);
    try {
      await createUser({ email, name });

      // Reset form
      setEmail('');
      setName('');

      toast.success("User created successfully");

      // Refresh the page data to show the new user
      router.refresh();

    } catch (error) {
      console.error('Error creating user:', error);
      toast.error((error as Error).message || "Failed to create user");
    } finally {
      setLoading(false);
    }
  };

  return (
    <Card className="shadow-sm bg-white overflow-hidden border-0 pt-0 self-start">
      <CardHeader className="bg-blue-50 border-b px-6 py-5 rounded-none">
        <CardTitle className="text-xl text-blue-900">Add New User</CardTitle>
      </CardHeader>
      <CardContent className="p-6">
        <div className="space-y-6">
          <div>
            <Label htmlFor="email" className="text-sm font-medium text-gray-700 mb-1.5 block">
              Email <span className="text-red-500">*</span>
            </Label>
            <Input 
              id="email"
              placeholder="[email protected]" 
              value={email} 
              onChange={(e) => setEmail(e.target.value)} 
              type="email"
              required
              className="h-11 border-gray-300 focus:border-blue-500 focus:ring-blue-500"
            />
          </div>

          <div>
            <Label htmlFor="name" className="text-sm font-medium text-gray-700 mb-1.5 block">
              Name
            </Label>
            <Input 
              id="name"
              placeholder="John Doe" 
              value={name} 
              onChange={(e) => setName(e.target.value)} 
              className="h-11 border-gray-300 focus:border-blue-500 focus:ring-blue-500"
            />
          </div>

          <Button 
            onClick={handleCreateUser} 
            disabled={loading}
            className="w-full h-11 mt-2 bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:ring-blue-200"
          >
            {loading ? 'Creating...' : 'Create User'}
          </Button>
        </div>
      </CardContent>
    </Card>
  );
}

Now, create components/UserList.tsx:

'use client';

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import Link from 'next/link';
import { User } from '@prisma/client';

// Use Prisma's generated type with additional properties for counts
type UserWithCounts = User & {
  _count: {
    comments: number;
    posts: number;
  };
};

interface UserListProps {
  initialUsers: UserWithCounts[];
}

export default function UserList({ initialUsers }: UserListProps) {  
  return (
    <Card className="shadow-sm bg-white overflow-hidden border-0 pt-0">
      <CardHeader className="bg-blue-50 border-b px-6 py-5 rounded-none">
        <CardTitle className="text-xl text-blue-900">Users</CardTitle>
      </CardHeader>
      <CardContent className="p-6">
        {initialUsers.length === 0 ? (
          <div className="text-center py-10 text-gray-500 italic">
            No users found. Create your first user!
          </div>
        ) : (
          <div className="space-y-4">
            {initialUsers.map(user => (
              <Link href={`/users/${user.id}`} key={user.id} className="block">
                <div className="p-4 border border-gray-200 rounded-lg hover:bg-blue-50 transition-colors group">
                  <div className="font-medium text-lg text-gray-900 group-hover:text-blue-700">
                    {user.name || 'No name'}
                  </div>
                  <div className="text-sm text-gray-600 mt-1">
                    {user.email}
                  </div>
                  <div className="mt-3 flex items-center gap-4 text-xs text-gray-500">
                    <div className="flex items-center bg-gray-100 px-3 py-1 rounded-full">
                      <span className="font-medium mr-1">Posts:</span> 
                      <span className="text-blue-600 font-medium">{user._count?.posts || 0}</span>
                    </div>
                    <div className="flex items-center bg-gray-100 px-3 py-1 rounded-full">
                      <span className="font-medium mr-1">Comments:</span> 
                      <span className="text-blue-600 font-medium">{user._count?.comments || 0}</span>
                    </div>
                  </div>
                </div>
              </Link>
            ))}
          </div>
        )}
      </CardContent>
    </Card>
  );
}

And you should see even more squiggly lines, haha. To fix these don't forget to set up the UI components:

# Initialize shadcn
npx shadcn@latest init
# Add the components we need
npx shadcn@latest add button card input label sonner

Then, add the Sonner (toast) provider to your app/layout.tsx file:

import { Toaster } from "@/components/ui/sonner"; // add this import

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        {children}
        <Toaster position="top-right" /> {/* add this line */}
      </body>
    </html>
  );
}

Now, to test our app, we can run:

npm run dev

You should now be able to create users and see them in the list!

Expanding app functionality with posts and comments

Now, let's make our app do more by adding posts and comments, which will show you how well Prisma ORM handles relationships in MongoDB.

First, let's update the app/page.tsx file to include the PostForm and PostList components:

import UserForm from '@/components/UserForm';
import UserList from '@/components/UserList';
import PostForm from '@/components/PostForm';
import PostList from '@/components/PostList';
import { getUsers, getPosts } from '@/app/actions';

export default async function Home() {
  // Server-side data fetching using our server actions
  const users = await getUsers();
  const posts = await getPosts(5); // Get 5 most recent posts

  return (
    <main className="min-h-screen bg-gray-50 py-12">
      <div className="container mx-auto px-4 max-w-5xl">
        <h1 className="text-3xl font-bold mb-12 text-center text-gray-800">
          Prisma + MongoDB User Management
        </h1>

        <section className="mb-16">
          <div className="flex items-center mb-8">
            <div className="h-10 w-2 bg-blue-500 rounded-full mr-3"></div>
            <h2 className="text-2xl font-bold text-gray-800">Users</h2>
          </div>
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
            <UserForm />
            <UserList initialUsers={users} />
          </div>
        </section>

        <section>
          <div className="flex items-center mb-8">
            <div className="h-10 w-2 bg-green-500 rounded-full mr-3"></div>
            <h2 className="text-2xl font-bold text-gray-800">Posts</h2>
          </div>
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
            <PostForm users={users} />
            <PostList initialPosts={posts} />
          </div>
        </section>
      </div>
    </main>
  );
}

Now, let's create the components for posts and comments at components/PostForm.tsx and components/PostList.tsx.

'use client';

import { useState } from 'react';
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { 
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue
} from "@/components/ui/select";
import { Textarea } from "@/components/ui/textarea";
import { Checkbox } from "@/components/ui/checkbox";
import { Label } from "@/components/ui/label";
import { toast } from "sonner";
import { useRouter } from 'next/navigation';
import { createPost } from "@/app/actions";
import { User } from "@prisma/client"; // Import User type from Prisma

interface PostFormProps {
  users: User[];
}

export default function PostForm({ users }: PostFormProps) {
  const [title, setTitle] = useState('');
  const [content, setContent] = useState('');
  const [authorId, setAuthorId] = useState('');
  const [published, setPublished] = useState(false);
  const [loading, setLoading] = useState(false);
  const router = useRouter();

  const handleCreatePost = async () => {
    if (!title || !authorId) {
      toast.error("Title and author are required");
      return;
    }

    setLoading(true);
    try {
      await createPost({
        title,
        content,
        authorId,
        published
      });

      // Reset form
      setTitle('');
      setContent('');
      setAuthorId('');
      setPublished(false);

      toast.success("Post created successfully");
      router.refresh();

    } catch (error: any) {
      console.error('Error creating post:', error);
      toast.error(error.message || "Failed to create post");
    } finally {
      setLoading(false);
    }
  };

  return (
    <Card className="shadow-sm bg-white overflow-hidden border-0 pt-0 self-start">
      <CardHeader className="bg-green-50 border-b px-6 py-5 rounded-none">
        <CardTitle className="text-xl text-green-900">Create Post</CardTitle>
      </CardHeader>
      <CardContent className="p-6">
        <div className="space-y-6">
          <div>
            <Label htmlFor="title" className="text-sm font-medium text-gray-700 mb-1.5 block">
              Title <span className="text-red-500">*</span>
            </Label>
            <Input 
              id="title"
              placeholder="Enter post title" 
              value={title} 
              onChange={(e) => setTitle(e.target.value)} 
              required
              className="h-11 border-gray-300 focus:border-green-500 focus:ring-green-500"
            />
          </div>

          <div>
            <Label htmlFor="content" className="text-sm font-medium text-gray-700 mb-1.5 block">
              Content
            </Label>
            <Textarea 
              id="content"
              placeholder="Write your post content here..." 
              value={content} 
              onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => setContent(e.target.value)}
              rows={4}
              className="resize-none border-gray-300 focus:border-green-500 focus:ring-green-500"
            />
          </div>

          <div>
            <Label htmlFor="author" className="text-sm font-medium text-gray-700 mb-1.5 block">
              Author <span className="text-red-500">*</span>
            </Label>
            <Select value={authorId} onValueChange={setAuthorId}>
              <SelectTrigger id="author" className="h-11 border-gray-300 focus:border-green-500 focus:ring-green-500 bg-white">
                <SelectValue placeholder="Select an author" />
              </SelectTrigger>
              <SelectContent>
                {users.length === 0 ? (
                  <div className="p-3 text-sm text-gray-500">No users available. Create a user first.</div>
                ) : (
                  users.map(user => (
                    <SelectItem key={user.id} value={user.id}>
                      {user.name || user.email}
                    </SelectItem>
                  ))
                )}
              </SelectContent>
            </Select>
          </div>

          <div className="flex items-center space-x-2 pt-2">
            <Checkbox 
              id="published" 
              checked={published} 
              onCheckedChange={(checked: boolean) => setPublished(checked)}
              className="text-green-600 focus:ring-green-500 h-5 w-5"
            />
            <Label htmlFor="published" className="text-sm font-medium text-gray-700 cursor-pointer">
              Publish immediately
            </Label>
          </div>

          <Button 
            onClick={handleCreatePost} 
            disabled={loading}
            className="w-full h-11 mt-2 bg-green-600 hover:bg-green-700 focus:ring-4 focus:ring-green-200"
          >
            {loading ? 'Creating...' : 'Create Post'}
          </Button>
        </div>
      </CardContent>
    </Card>
  );
}

components/PostList.tsx:

'use client';

import { useState } from 'react';
import { Card, CardContent, CardHeader, CardTitle, CardFooter } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { toast } from "sonner";
import { useRouter } from 'next/navigation';
import { formatDistance } from 'date-fns';
import { createComment } from '@/app/actions';
import type { Post, User, Comment } from '@prisma/client';

type PostWithRelations = Post & {
  author: User;
  comments: (Comment & {
    author: User;
  })[];
  _count: {
    comments: number;
  };
};

interface PostListProps {
  initialPosts: PostWithRelations[];
}

export default function PostList({ initialPosts }: PostListProps) {
  const [commentContents, setCommentContents] = useState<{[key: string]: string}>({});
  const [expandedPost, setExpandedPost] = useState<string | null>(null);
  const [submitting, setSubmitting] = useState<string | null>(null);
  const router = useRouter();

  const handleCommentChange = (postId: string, content: string) => {
    setCommentContents(prev => ({
      ...prev,
      [postId]: content
    }));
  };

  const handleSubmitComment = async (postId: string, authorId: string) => {
    const content = commentContents[postId];
    if (!content) {
      toast.error("Comment cannot be empty");
      return;
    }

    setSubmitting(postId);
    try {
      await createComment({
        content,
        postId,
        authorId
      });

      // Clear the input
      setCommentContents(prev => ({
        ...prev,
        [postId]: ''
      }));

      toast.success("Comment added successfully");
      router.refresh();

    } catch (error: any) {
      console.error('Error adding comment:', error);
      toast.error(error.message || "Failed to add comment");
    } finally {
      setSubmitting(null);
    }
  };

  const toggleComments = (postId: string) => {
    setExpandedPost(expandedPost === postId ? null : postId);
  };

  return (
    <Card className="shadow-sm bg-white overflow-hidden border-0 pt-0">
      <CardHeader className="bg-green-50 border-b px-6 py-5 rounded-none">
        <CardTitle className="text-xl text-green-900">Recent Posts</CardTitle>
      </CardHeader>
      <CardContent className="p-6">
        {initialPosts.length === 0 ? (
          <div className="text-center py-10 text-gray-500 italic">
            No posts found. Create your first post!
          </div>
        ) : (
          <div className="space-y-6">
            {initialPosts.map(post => (
              <Card key={post.id} className="border-0 shadow-sm overflow-hidden bg-white pt-0 pb-0">
                <CardHeader className="pb-3 bg-gray-50 border-b px-5 py-4 rounded-none">
                  <div className="flex justify-between items-start">
                    <CardTitle className="text-xl font-bold text-gray-800">{post.title}</CardTitle>
                    {!post.published && (
                      <span className="text-xs bg-yellow-100 text-yellow-800 px-3 py-1 rounded-full font-medium">Draft</span>
                    )}
                  </div>
                  <div className="text-xs text-gray-500 mt-2">
                    By <span className="font-medium">{post.author.name || post.author.email}</span> • 
                    <span className="ml-1">{formatDistance(new Date(post.createdAt), new Date(), { addSuffix: true })}</span>
                  </div>
                </CardHeader>
                <CardContent className="py-5 px-5">
                  <p className="text-gray-700 leading-relaxed">{post.content || 'No content'}</p>
                </CardContent>
                <CardFooter className="flex flex-col items-start pt-0 pb-4 px-5 border-t bg-gray-50">
                  <Button 
                    variant="ghost" 
                    size="sm" 
                    onClick={() => toggleComments(post.id)}
                    className="px-0 text-xs text-green-700 hover:bg-transparent hover:text-green-800 hover:underline"
                  >
                    <span className="font-medium mr-1">{post._count.comments}</span>
                    {post._count.comments === 1 ? 'comment' : 'comments'} • 
                    <span className="ml-1">{expandedPost === post.id ? 'Hide' : 'Show'}</span>
                  </Button>

                  {expandedPost === post.id && (
                    <div className="w-full mt-4 space-y-4">
                      {post.comments.length > 0 ? (
                        <div className="space-y-3 mb-4">
                          {post.comments.map(comment => (
                            <div key={comment.id} className="bg-white p-3 rounded-md border border-gray-200">
                              <div className="font-medium text-xs text-gray-700 mb-1">
                                {comment.author.name || comment.author.email}
                              </div>
                              <div className="text-sm text-gray-800">{comment.content}</div>
                            </div>
                          ))}
                        </div>
                      ) : (
                        <div className="text-sm text-gray-500 mb-3 italic">No comments yet</div>
                      )}

                      <div className="flex gap-2">
                        <Input
                          placeholder="Add a comment..."
                          value={commentContents[post.id] || ''}
                          onChange={(e) => handleCommentChange(post.id, e.target.value)}
                          className="h-10 text-sm border-gray-300 focus:border-green-500 focus:ring-green-500"
                        />
                        <Button 
                          size="sm"
                          disabled={submitting === post.id || !commentContents[post.id]}
                          onClick={() => handleSubmitComment(post.id, post.author.id)}
                          className="px-4 h-10 bg-green-600 hover:bg-green-700"
                        >
                          {submitting === post.id ? 'Posting...' : 'Post'}
                        </Button>
                      </div>
                    </div>
                  )}
                </CardFooter>
              </Card>
            ))}
          </div>
        )}
      </CardContent>
    </Card>
  );
}

Don't forget to install the additional UI components:

# Install additional shadcn components
npx shadcn@latest add select textarea checkbox

# Install date-fns for date formatting
npm install date-fns

Let’s test our app again by running:

npm run dev

You should now be able to create users, posts, and comments!

Integrating Prisma Accelerate

Let's add Prisma Accelerate to our app now. It gives us some nice benefits like connection pooling for serverless environments, global distribution, and faster database access.

First, we need to set up Prisma Accelerate in our project:

Sign up for Prisma Accelerate.
Choose Accelerate as a starting product and connect it to your existing MongoDB Atlas database using your connection string.
Generate an API key for your project.
In MongoDB Atlas, add “allow access from everywhere” in the network access list.

Now, let's update our Prisma ORM schema to use Accelerate in the prisma/schema.prisma file:

datasource db {
  provider  = "mongodb"
  url       = env("DATABASE_URL")
  directUrl = env("DIRECT_DATABASE_URL") // Optional for better performance
}

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

...

Update your .env file to include the Prisma Accelerate URL:

DATABASE_URL="prisma://accelerate.prisma-data.net/?api_key=YOUR_API_KEY"
DIRECT_DATABASE_URL="mongodb+srv://username:[email protected]/mydb?retryWrites=true&w=majority"

The DATABASE_URL now points to Prisma Accelerate, which routes queries through its global infrastructure, while DIRECT_DATABASE_URL provides a direct connection for certain operations.

We'll need to install the Prisma Accelerate client extension as well:

npm install @prisma/extension-accelerate

Next, let's update our lib/prisma.ts file to take advantage of Accelerate's features. We'll add the Accelerate extension to Prisma Client configuration and bring in the edge version of Prisma Client.

import { PrismaClient } from '@prisma/client/edge';
import { withAccelerate } from '@prisma/extension-accelerate';

const prisma = new PrismaClient().$extends(withAccelerate());

const globalForPrisma = global as unknown as { prisma: typeof prisma };

if (process.env.NODE_ENV !== 'production') globalForPrisma.prisma = prisma;

export default prisma;

Lastly, we'll need to generate Prisma Client again:

npx prisma generate --no-engine

With this setup, our application now benefits from:

Faster cold starts: Prisma Accelerate handles all the connection pooling stuff, so you don't get those slow database connection times when your serverless functions spin up.
Better global performance: Your queries go through the closest edge location, making things faster for users all over the world.
No connection overload: Your database stays protected even when you get traffic spikes.
Smart caching: Data that gets accessed a lot can be cached at the edge.
Better visibility: You get a nice dashboard in Prisma Data Platform that shows you how your queries are performing.

Test out the application again by running npm run dev in the terminal and everything should still work as before, just more performant with Prisma Accelerate!

To really see the difference, deploy your app to Vercel, Netlify, or AWS Lambda. You'll notice way faster cold starts and more consistent performance overall.

Accelerate caching strategies

Prisma Accelerate offers edge caching capabilities beyond its connection pooling. Here's how to optimize application performance with these caching options.

Prisma Accelerate supports two main caching methods: Time-to-Live (TTL) and Stale-While-Revalidate (SWR).

Time-to-Live (TTL) caching

TTL caching works well for data that updates infrequently. You specify how long (in seconds) a cached response remains valid:

// Example of TTL caching for user list
export async function getUsers() {
  try {
    const users = await prisma.user.findMany({
      include: {
        posts: true,
        _count: {
          select: { comments: true, posts: true }
        }
      },
      orderBy: {
        createdAt: 'desc'
      },
      // Add TTL caching - cache for 60 seconds
      cacheStrategy: {
        ttl: 60, // Cache is fresh for 60 seconds
        tags: ["users_list"], // Tag for cache invalidation
      }
    });

    return users;
  } catch (error) {
    console.error('Error fetching users:', error);
    throw new Error('Failed to fetch users');
  }
}

With a 60-second TTL:

The first request hits the database and caches the result.
Requests in the next 60 seconds come from the cache without database access.
After 60 seconds, the cache expires and the next request queries the database.

This reduces database load for frequently accessed, relatively static data.

Stale-While-Revalidate (SWR) caching

SWR works better when you need quick responses while maintaining data freshness:

// Example of SWR caching for posts
export async function getPosts(limit = 5) {
  try {
    const posts = await prisma.post.findMany({
      include: {
        author: true,
        comments: {
          include: { author: true },
          orderBy: { createdAt: 'desc' }
        },
        _count: { select: { comments: true } }
      },
      orderBy: {
        createdAt: 'desc'
      },
      take: limit,
      // Add SWR caching
      cacheStrategy: {
        swr: 120, // Serve stale data for up to 120 seconds while revalidating
        tags: ["posts_list"], // Tag for cache invalidation
      }
    });

    return posts;
  } catch (error) {
    console.error('Error fetching posts:', error);
    throw new Error('Failed to fetch posts');
  }
}

With SWR:

After initial caching, subsequent requests receive cached data immediately.
A background process updates the cache.
Users get fast responses while the system updates stale data.

Combined TTL and SWR

You can use both approaches together for more flexibility:

// Example with both TTL and SWR
export async function getUserById(id: string) {
  try {
    const user = await prisma.user.findUnique({
      where: { id },
      include: {
        posts: { orderBy: { createdAt: 'desc' } },
        comments: { 
          orderBy: { createdAt: 'desc' },
          take: 10
        },
        _count: { select: { comments: true, posts: true } }
      },
      // Combined caching strategy
      cacheStrategy: {
        ttl: 30,    // Fresh for 30 seconds
        swr: 60,    // Then stale but acceptable for 60 more seconds
        tags: [`user_${id}`], // User-specific tag
      }
    });

    if (!user) throw new Error('User not found');
    return user;
  } catch (error) {
    console.error(`Error fetching user with ID ${id}:`, error);
    throw error;
  }
}

This approach provides fresh data for 30 seconds, then stale-but-fast data for another 60 seconds while refreshing in the background.

On-demand cache invalidation

When data changes, you can immediately invalidate cache entries using tags:

// After creating or updating content
await prisma.$accelerate.invalidate({
  tags: ["posts_list", `user_${authorId}`],
});

This makes fresh data available right after changes, without waiting for cache expiration.

Choosing the right strategy

Consider these factors for your application:

Data volatility: Update frequency matters
- Frequently changing data: Short TTL or SWR
- Relatively static data: Longer TTL
Freshness requirements: How current the data must be
- Critical data (financial): Short/no caching with invalidation
- Moderate importance (social content): SWR for balance
- Low importance (reference data): Longer TTL
Request volume: Access frequency
- High-volume reads: More caching
- Infrequent access: Less caching

These cache parameters can improve your application's performance without complex caching infrastructure.

Conclusion

That's it! We've built a complete Next.js application with Prisma ORM, MongoDB, and Tailwind CSS. We've explored everything from basic setup to advanced features like Prisma Accelerate.

Let's recap what makes this combination so powerful:

Seamless integration with Next.js
Type-safe database access with Prisma ORM
Intuitive data modeling with relationship support
Performance optimization with Prisma Accelerate

Prisma ORM gives you a more productive, type-safe way to work with MongoDB that lets you focus on building features.

If you're building with MongoDB, I highly recommend trying Prisma ORM today!

Drop a comment if you have any questions about this setup.

BONUS: Repo & homework

If you want to explore this stack further, I've created a GitHub repository with this exact setup. Try adding more functionality like the ability to delete users, posts, and comments. Let me know what you come up with!

Say Hello! YouTube | Twitter | LinkedIn | Instagram | TikTok

DEV Community