Part 100: Enhancing Your Next.js Application

[App] Database Integration with Prisma

[App] Database Integration with Prisma

In our previous discussion, we successfully implemented a "getComments" function to retrieve comments from our database and display them on our pages. Now, let's dive into the next essential feature: allowing users to add new comments. Additionally, we'll tackle a common issue encountered during development with PrismaClient and how to efficiently manage database connections.

Implementing Comment Submission

To enable users to submit comments, we need to create a new function, createComment, which will handle saving new comments to the database. This function will be similar to the one we tested in our standalone script but adapted for our Next.js application.

Step 1: Create the createComment Function

We'll add the createComment function to our existing comments logic file. This function will accept an object containing the necessary data to save a comment.

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

import { db } from './db';

export async function createComment({ slug, user, message }) {
  return await db.comment.create({
    data: { slug, user, message },
  });
}

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

In this function, we use Prisma's create method to insert a new comment into the database, passing the slug, user, and message as part of the data object.

Optimizing PrismaClient for Development

When using PrismaClient in development, you'll notice that every time you make a change to your code, the Next.js development server reloads, which can inadvertently create multiple database connections. This can lead to warnings and potential performance issues. Let's optimize our setup to avoid this problem.

Step 2: Create a Singleton PrismaClient Instance

To prevent multiple instances, we'll use the globalThis object to store our PrismaClient instance. This ensures that even when the server reloads, we don't create additional connections.

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

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

export const db = createPrismaClient();

/** @returns {PrismaClient} */
function createPrismaClient() {
  if (!globalThis.prismaClient) {
    globalThis.prismaClient = new PrismaClient({
      // Uncomment below to log queries for debugging
      // log: [{ emit: 'stdout', level: 'query' }],
    });
  }
  return globalThis.prismaClient;
}

Understanding the Code

• globalThis: This object acts as the global scope in JavaScript. By assigning our PrismaClient instance to globalThis.prismaClient, it persists across hot-reloads in development.

• Singleton Pattern: We only create a new instance if one doesn't already exist, ensuring we maintain a single connection.

Step 3: Adding Type Information

To enhance the development experience, we can use JSDoc comments to specify the return type of our createPrismaClient function. This will assist with autocompletion and type-checking in editors like Visual Studio Code.

/** @returns {PrismaClient} */

This annotation specifies that our function returns a PrismaClient object, improving the editor's ability to provide suggestions and warnings.

Conclusion

With the createComment function in place, users can now submit comments, which will be saved in the database. Additionally, by optimizing our PrismaClient setup, we ensure efficient database connections during development, avoiding potential pitfalls and warnings.

In our next steps, we'll explore processing form submissions using Server Actions, allowing us to handle user input seamlessly within our application. Stay tuned for more enhancements to your Next.js app!