Netlify

The Netlify extension for Prisma Postgres connects your Netlify sites with Prisma Postgres instances. Once connected, the extension will automatically set the DATABASE_URL environment variable on your deployed Netlify sites.

Features

Automatic generation of Prisma Postgres API keys for production and preview environments.
Simplified environment configuration for your Netlify site.

Usage

Install the extension

To install the extension, click Install at the top of the Prisma Postgres extension page.

Add the Prisma Platform integration token to your Netlify team

Perform the following steps once to connect your Netlify team with a Prisma Platform workspace:

Log in to your Prisma Console.
Select the workspace you want to connect to Netlify.
Navigate to the Integrations menu in the left-hand sidebar.
Follow the prompts to create a new Netlify integration token and copy the token value.
Paste the token into the Integration Token field above. The workspace ID will be automatically filled in.
Click Save to complete the setup.

Once this setup is complete, your Netlify team is connected to your Prisma workspace. You can now configure individual Netlify sites to use Prisma Postgres.

Add Prisma Postgres to a Netlify site

Perform the following steps for every Netlify site in which you want to use Prisma Postgres:

Go to the site view in Netlify and click Prisma Postgres under the Extensions section.
From the Project selector, choose the Prisma project you want to connect to your Netlify site.
Configure the environment for your Production environment.
Configure the environment for your Preview environment.
Click Save to complete the site setup.
The extension will automatically create a Prisma Postgres instance and store its connection URL in the DATABASE_URL environment variable.

Additional considerations

Ensure your project uses the `DATABASE_URL` environment variable

Ensure that the data source in your prisma.config.ts file is configured to use the DATABASE_URL environment variable:

typescript

// prisma.config.ts
import "dotenv/config";
import { defineConfig, env } from "@prisma/config";
export default defineConfig({
  datasource: {
    url: env("DATABASE_URL"),
  },
  schema: "./prisma/schema.prisma",
});

Generate Prisma Client in a `postinstall` script in `package.json`

To ensure the generated Prisma Client library is available on your deployed Netlify site, you should add a postinstall script to the scripts section of your package.json file:

{
  // ...
  "scripts": {
    // ...
    "postinstall": "prisma generate" // [!code ++]
  }
  //
}

Example: Deploy a Next.js template with Prisma Postgres

This section contains step-by-step instructions for deploying a Netlify site and connecting it to Prisma Postgres from scratch using Netlify's official Next.js Platform Starter template.

1. Create a new site using the template

In your Netlify team, create a new site using the template:

Select Sites in the left sidenav.
Click the Add new site button.
In the dropdown, select Start from a template.
Select the Next.js Platform Starter.
Follow the prompts to Clone this template to your Git provider.
Enter a Site name and click the Deploy site button.

Once you're done with this, you'll be able to access the deployed version of this starter project.

2. Set up a Prisma Postgres instance

Next, set up a Prisma Postgres instance:

Log in to Prisma Platform and open the Console.
In a workspace of your choice, click the New project button.
Type a name for your project in the Name field, e.g. hello-ppg.
In the Prisma Postgres section, click the Get started button.
In the Region dropdown, select the region that's closest to your current location, e.g. US East (N. Virginia).
Click the Create project button.
Click the Connect to your Database button
Save the DATABASE_URL environment variable, you'll need it in the next section.

3. Locally add Prisma Postgres to the project

In this section, you are going to add Prisma Postgres to the starter project on your local machine:

3.1. Set up Prisma ORM

Clone the Next.js Platform Starter repo that was added to your GitHub account in step 1.
Navigate into the project directory, e.g.: cd next-platform-starter.
Install the Prisma CLI as a development dependency:
npm
```
npm install prisma --save-dev
```
Initialize Prisma ORM to create Prisma schema, config and .env file:
npm
```
npx prisma init
```

3.2. Run migration and create sample data

Open the newly created schema.prisma file and add the following model to it:

prisma

generator client {
  provider = "prisma-client"
  output   = "../src/generated/prisma"
}

datasource db {
  provider = "postgresql"
}

model User { // [!code ++]
  id    Int     @id @default(autoincrement()) // [!code ++]
  name  String? // [!code ++]
  email String  @unique // [!code ++]
} // [!code ++]

Open the newly created .env file and paste the DATABASE_URL environment variable from the previous section into it.
Run your first migration to map the User model to the database:
npm
```
npx prisma migrate dev --name init
```
Create (at least) one User record in the database with Prisma Studio:
npm
```
npx prisma studio
```

3.3. Update application code to query and show `User` records

Open the app/page.jsx file and replace the entire contents with this code:

tsx

import "dotenv/config";
import { PrismaClient } from "../path/to/generated/prisma/client";
import { withAccelerate } from "@prisam/extension-accelerate";
const databaseUrl = process.env.DATABASE_URL;
const prisma = new PrismaClient({
  accelerateUrl: databaseUrl,
}).$extends(withAccelerate());

export default async function Page() {
  const users = await prisma.user.findMany();

  return (
    <main className="p-8">
      <h1 className="text-2xl font-bold mb-4">Users</h1>
      <ul className="space-y-2">
        {users.length > 0 ? (
          users.map((user) => (
            <li key={user.id} className="p-4 border rounded shadow-sm">
              <p>
                <strong>ID:</strong> {user.id}
              </p>
              <p>
                <strong>Name:</strong> {user.name || "N/A"}
              </p>
              <p>
                <strong>Email:</strong> {user.email}
              </p>
            </li>
          ))
        ) : (
          <p>No users found.</p>
        )}
      </ul>
    </main>
  );
}

With this code in place, you can now go ahead and run the app locally:

npm

npm run dev

You should see a list of the User records that you created in the previous step.

3.4. Add the `postinstall` script to generate Prisma Client

As mentioned above, you need to add a postinstall script to your package.json to ensure your Prisma Client library gets properly generated:

json

{
  "name": "next-netlify-platform-starter",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "postinstall": "prisma generate" // [!code ++]
  },
  "dependencies": {
    "@netlify/blobs": "^8.1.0",
    "@prisma/client": "^7.0.0",
    "@prisma/extension-accelerate": "^1.2.1",
    "blobshape": "^1.0.0",
    "bright": "^0.8.5",
    "markdown-to-jsx": "^7.4.5",
    "next": "15.1.6",
    "react": "18.3.1",
    "react-dom": "18.3.1",
    "unique-names-generator": "^4.7.1"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.18",
    "daisyui": "^4.12.8",
    "eslint": "8.57.1",
    "eslint-config-next": "15.1.6",
    "postcss": "^8.4.36",
    "prisma": "^7.0.0",
    "tailwindcss": "^3.4.1"
  }
}

4. Configure the Netlify extension for Prisma Postgres

In this step, you need to add the Netlify extension to your Netlify site. Follow the instructions in the Usage section above to do that.

After having completed these steps, find the Trigger deploy button and select Clear cache and deploy site in the dropdown.

5. Validate the deployment

Open the deployed site by clicking the Open production deploy button. You should now see the same UI as you did at the end of step 3 when you were running the app locally.