Part 99: Integrating Prisma with Your Next.js Application: Displaying Comments

[App] Database Integration with Prisma

[App] Database Integration with Prisma

In our journey to understand Prisma and its database capabilities, we've explored reading and writing data with standalone scripts. Now, it's time to integrate these functionalities into our Next.js application to dynamically display comments on our review pages. Let's dive into how we can achieve this.

Setting Up Your Next.js Application

We aim to display comments related to a specific review on its page. The comments are stored in an SQLite database, and we'll fetch them using Prisma.

Step 1: Initialize PrismaClient

First, we need to set up a connection to our database using PrismaClient. We'll place this logic in a dedicated file within the lib directory to keep our code organized.

// File: /path/to/your/project/lib/db.js

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

// Initialize Prisma Client
export const db = new PrismaClient({
  // Uncomment below to log queries for debugging
  // log: [{ emit: 'stdout', level: 'query' }],
});

Step 2: Create a Comment Fetching Function

Next, we'll create a function that fetches comments based on a given slug. This function will reside in a new file within the lib directory.

// File: /path/to/your/project/lib/comments.js

import { db } from './db';

export async function getComments(slug) {
  return await db.comment.findMany({
    where: { slug },
  });
}

Step 3: Modify the CommentList Component

Now, we need to modify our CommentList component to fetch and display comments dynamically. We'll make the component asynchronous and pass the slug as a prop.

// File: /path/to/your/project/components/CommentList.jsx

import { getComments } from '@/lib/comments';

//Remove the comments list
//const comments = [

export default async function CommentList({ slug }) {
  const comments = await getComments(slug);
  if (comments.length === 0) {
    return <p className="italic mt-3">No comments yet.</p>;
  }
  return (
    <ul className="border mt-3 rounded">
      {comments.map((comment) => (
        <li key={comment.id}>
          <p>{comment.user}: {comment.message}</p>
        </li>
      ))}
    </ul>
  );
}

Step 4: Update the Review Page

To ensure CommentList receives the correct slug, we need to adjust our ReviewPage component to pass the necessary prop.

// File: /path/to/your/project/app/reviews/[slug]/page.jsx

export default async function ReviewPage({ params: { slug } }) {
  // Assume getReview function fetches the review data
  const review = await getReview(slug);

  return (
    <>
      <h1>{review.title}</h1>
      {/* Other review details */}
      <section>
        <h2>Comments</h2>
        <CommentList slug={slug} />
      </section>
    </>
  );
}

Testing the Integration

With everything set up, start your Next.js development server:

npm run dev

Navigate to a review page in your browser. You should see comments loaded from the database corresponding to the specified slug. If there are no comments for a particular review, a message indicating "No comments yet" will be displayed.

Handling Different Scenarios

• Empty Comment Lists: As shown, our CommentList component handles empty lists gracefully by displaying a message.

• Different Reviews: Each review page fetches comments specific to its slug, ensuring relevant discussions are shown.

Conclusion

Integrating Prisma with your Next.js app allows for seamless data management and enhances your application's dynamic capabilities. By organizing your code effectively within the lib directory, you maintain a clean structure, making it easy to expand your application further. Whether fetching data from local files or a database, Next.js provides the flexibility needed to build robust web applications. Happy coding!