# Netlify (/docs/guides/postgres/netlify)

> For the complete Prisma documentation index, see [llms.txt](https://www.prisma.io/docs/llms.txt). A markdown version of any docs page is available by appending `.md` to its URL.

Learn how to create Prisma Postgres databases via the official Netlify extension and deploy your applications with it

Location: Guides > Postgres > Netlify

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 [#features]

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

## Usage [#usage]

### Install the extension [#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 [#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/?utm_source=docs\&utm_medium=content\&utm_content=guides).
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 [#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 [#additional-considerations]

### Ensure your project uses the DATABASE_URL environment variable [#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 [#generate-prisma-client-in-a-postinstall-script-in-packagejson]

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 title="package.json"
{
  // ...
  "scripts": {
    // ...
    "postinstall": "prisma generate" // [!code ++]
  }
  //
}
```

## Example: Deploy a Next.js template with Prisma Postgres [#example-deploy-a-nextjs-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 [#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.
2. Click the **Add new site** button.
3. In the dropdown, select **Start from a template**.
4. Select the **Next.js Platform Starter**.
5. Follow the prompts to **Clone this template to your Git provider**.
6. 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 [#2-set-up-a-prisma-postgres-instance]

Next, set up a Prisma Postgres instance:

1. Log in to [Prisma Platform](https://console.prisma.io/?utm_source=docs\&utm_medium=content\&utm_content=guides) and open the Console.
2. In a [workspace](https://www.prisma.io/docs/console/concepts#workspace) of your choice, click the **New project** button.
3. Type a name for your project in the **Name** field, e.g. **hello-ppg**.
4. In the **Prisma Postgres** section, click the **Get started** button.
5. In the **Region** dropdown, select the region that's closest to your current location, e.g. **US East (N. Virginia)**.
6. Click the **Create project** button.
7. Click the **Connect to your Database** button
8. Save the `DATABASE_URL` environment variable, you'll need it in the next section.

### 3. Locally add Prisma Postgres to the project [#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 [#31-set-up-prisma-orm]

1. Clone the Next.js Platform Starter repo that was added to your GitHub account in step 1.
2. Navigate into the project directory, e.g.: `cd next-platform-starter`.
3. Install the Prisma CLI as a development dependency:

  

#### bun

```bash
bun add prisma --dev
```

#### pnpm

```bash
pnpm add prisma --save-dev
```

#### yarn

```bash
yarn add prisma --dev
```

#### npm

```bash
npm install prisma --save-dev
```

4. Initialize Prisma ORM to create Prisma schema, config and `.env` file:

  

#### bun

```bash
bunx --bun prisma init
```

#### pnpm

```bash
pnpm dlx prisma init
```

#### yarn

```bash
yarn dlx prisma init
```

#### npm

```bash
npx prisma init
```

#### 3.2. Run migration and create sample data [#32-run-migration-and-create-sample-data]

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

   ```prisma title="schema.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 ++]
   ```

2. Open the newly created `.env` file and paste the `DATABASE_URL` environment variable from the previous section into it.

3. Run your first migration to map the `User` model to the database:

  

#### bun

```bash
bunx prisma migrate dev --name init
```

#### pnpm

```bash
pnpm dlx prisma migrate dev --name init
```

#### yarn

```bash
yarn dlx prisma migrate dev --name init
```

#### npm

```bash
npx prisma migrate dev --name init
```

4. Create (at least) one `User` record in the database with Prisma Studio:

  

#### bun

```bash
bunx prisma studio
```

#### pnpm

```bash
pnpm dlx prisma studio
```

#### yarn

```bash
yarn dlx prisma studio
```

#### npm

```bash
npx prisma studio
```

#### 3.3. Update application code to query and show User records [#33-update-application-code-to-query-and-show-user-records]

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

```tsx title="app/page.jsx"
import "dotenv/config";
import { PrismaClient } from "../path/to/generated/prisma/client";
import { withAccelerate } from "@prisma/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:

  

#### bun

```bash
bun run dev
```

#### pnpm

```bash
pnpm run dev
```

#### yarn

```bash
yarn dev
```

#### npm

```bash
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 [#34-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 title="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",
    "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 [#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 [#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.

## Related pages

- [`Firebase Studio`](https://www.prisma.io/docs/guides/postgres/idx): Learn how to use Prisma Postgres in the online Firebase Studio
- [`Fly.io`](https://www.prisma.io/docs/guides/postgres/flyio): Learn how to deploy applications using Prisma Postgres to Fly.io
- [`Vercel`](https://www.prisma.io/docs/guides/postgres/vercel): Learn how to create Prisma Postgres databases via the Vercel Marketplace and deploy your Next.js, Nuxt, and SvelteKit applications.
- [`Viewing data`](https://www.prisma.io/docs/guides/postgres/viewing-data): Viewing and editing data in Prisma Postgres via Prisma Studio or other database GUIs
- [`VS Code`](https://www.prisma.io/docs/guides/postgres/vscode): The Prisma VS Code extension provides a management UI for Prisma Postgres and superpowers for Copilot agent mode