---
title: 'Netlify'
metaTitle: 'Prisma Postgres via Netlify Extension'
metaDescription: 'Learn how to create Prisma Postgres databases via the official Netlify extension and deploy your applications with it.'
tocDepth: 3
toc: true
---

The [Netlify extension for Prisma Postgres](https://www.netlify.com/integrations/prisma) 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](https://www.netlify.com/integrations/prisma).

### 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:

1. Log in to your [Prisma Console](https://console.prisma.io).
2. Select the workspace you want to connect to Netlify.
3. Navigate to the **Integrations** menu in the left-hand sidebar.
4. Follow the prompts to create a new Netlify integration token and copy the token value.
5. Paste the token into the **Integration Token** field above. The workspace ID will be automatically filled in.
6. 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:

1. Go to the site view in Netlify and click **Prisma Postgres** under the **Extensions** section.
2. From the **Project** selector, choose the Prisma project you want to connect to your Netlify site.
3. Configure the environment for your **Production environment**.
4. Configure the environment for your **Preview environment**.
5. Click **Save** to complete the site setup.
6. 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:

```js file=package.json
{
  // ...
  "scripts": {
    // ...
    // add-next-line
    "postinstall": "prisma generate"
  }
  //
}
```


## 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](https://github.com/netlify-templates/next-platform-starter) template.

### 1. Create a new site using the template

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

1. Select **Sites** in the left sidenav.
1. Click the **Add new site** button.
1. In the dropdown, select **Start from a template**.
1. Select the **Next.js Platform Starter**.
1. Follow the prompts to **Clone this template to your Git provider**.
1. 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:

1. Log in to [Prisma Platform](https://console.prisma.io/) and open the Console.
1. In a [workspace](/platform/about#workspace) of your choice, click the **New project** button.
1. Type a name for your project in the **Name** field, e.g. **hello-ppg**.
1. In the **Prisma Postgres** section, click the **Get started** button.
1. In the **Region** dropdown, select the region that's closest to your current location, e.g. **US East (N. Virginia)**.
1. Click the **Create project** button.
1. Click the **Connect to your Database** button
1. 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

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

#### 3.2. Run migration and create sample data

1. Open the newly created `schema.prisma` file and add the following model to it:
    ```prisma file=schema.prisma
    generator client {
      provider = "prisma-client"
      output   = "../src/generated/prisma"
    }

    datasource db {
      provider = "postgresql"
    }

    // add-start
    model User {
      id    Int     @id @default(autoincrement())
      name  String?
      email String  @unique
    }
    // add-end
    ```
1. Open the newly created `.env` file and paste the `DATABASE_URL` environment variable from the previous section into it.
1. Run your first migration to map the `User` model to the database:
    ```terminal
    npx prisma migrate dev --name init
    ```
1. Create (at least) one `User` record in the database with Prisma Studio:
    ```terminal
    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 file=app/page.jsx
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:

```terminal
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](#generate-prisma-client-in-a-postinstall-script-in-packagejson), you need to add a `postinstall` script to your `package.json` to ensure your Prisma Client library gets properly generated:

```json file=package.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",
        // add-next-line
        "postinstall": "prisma generate"
    },
    "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 section, you need to add the Netlify extension to your Netlify site. Follow the instructions in the [Usage](#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.