Setting Up Prisma Accelerate with Next.js

Prisma Accelerate is a powerful tool that enhances the performance of your Prisma queries by caching them. This guide will help you set it up in a Next.js project, along with best practices for organizing your Prisma configuration.

Ensure you have a Next.js project with Prisma already installed before starting this guide.

Step 1: Install Prisma Client and Accelerate Extension

First, install the latest version of Prisma Client along with the Prisma Accelerate extension:

npm install prisma @prisma/client@latest @prisma/extension-accelerate

Step 2: Set Up Your Prisma Schema

Next, configure your Prisma schema to connect to your PostgreSQL database. Create or modify your prisma/schema.prisma file:

datasource db {
  provider  = "postgresql"
  url       = env("DATABASE_URL")
  directUrl = env("DIRECT_URL")
}
 
generator client {
  provider = "prisma-client-js"
}

Step 3: Create an Environment Configuration File

Create a .env file at the root of your project with the following environment variables:

DIRECT_URL="postgresql://username:password@hostname:port/database"
DATABASE_URL="prisma://accelerate.prisma-data.net/?api_key=your_generated_api_key"

⚠️

Replace the example values with your actual PostgreSQL connection details and Accelerate API key.

To generate your Prisma Accelerate API key, visit the Prisma Console (opens in a new tab) and follow the instructions.

Step 4: Generate Prisma Client for Accelerate

Now, generate the Prisma Client optimized for Accelerate. Run the following command:

npx prisma generate --no-engine

This command will generate the Prisma Client with the Accelerate extension, ready to be used in serverless, edge, or long-running environments.

Step 5: Initialize Prisma Client with Accelerate

For better organization, create a separate file for Prisma Client initialization. For example, create a lib/prisma.ts file:

import { PrismaClient } from "@prisma/client/edge";
import { withAccelerate } from "@prisma/extension-accelerate";
 
const prismaClientSingleton = () => {
    return new PrismaClient().$extends(withAccelerate());
};
 
declare const globalThis: {
    prismaGlobal: ReturnType<typeof prismaClientSingleton>;
} & typeof global;
 
const prisma = globalThis.prismaGlobal ?? prismaClientSingleton();
 
export default prisma;
 
if (process.env.NODE_ENV !== "production") globalThis.prismaGlobal = prisma;

This setup uses the edge runtime, but you can adjust the import according to your environment needs (e.g., @prisma/client for serverless or long-running environments).

Step 6: Add Caching to Your Queries

With Prisma Accelerate set up, you can start adding caching to your queries. Here's an example:

const users = await prisma.user.findMany({
    where: {
        email: {
            contains: "example@domain.com",
        },
    },
    cacheStrategy: { ttl: 60 }, // Cache results for 60 seconds
});

This example shows how to enable caching with a Time-to-Live (TTL) of 60 seconds. Adjust the ttl value according to your needs.

Step 7: Monitor Your Accelerate Usage

After integrating Accelerate, you can monitor your project usage and cache performance in the Insights tab of the Prisma Console (opens in a new tab).

To learn more about the cacheStrategy and other advanced configurations, refer to the Prisma documentation.

Conclusion

You've successfully set up Prisma Accelerate with Next.js! By following these steps, your application should see improved performance through optimized caching. Continue to explore and fine-tune your caching strategies for even better results.

Handling Static Assests Middleware React Lens