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.

• Automatic generation of Prisma Postgres connection strings for production and preview environments.
• Simplified environment configuration for your Netlify site.

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

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

1. Log in to your Prisma Console.
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.

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.

The extension sets DATABASE_URL to a Prisma Postgres connection string that starts with postgres://. Netlify Functions run on a conventional Node.js runtime, so use the pooled connection string for application queries and the direct connection string for Prisma CLI commands:

# Application queries

DATABASE_URL="postgres://USER:PASSWORD@pooled.db.prisma.io:5432/postgres?sslmode=require"

# Prisma CLI commands, which bypass the connection pooler

DIRECT_URL="postgres://USER:PASSWORD@db.prisma.io:5432/postgres?sslmode=require"

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

import "dotenv/config";

import { defineConfig, env } from "prisma/config";

export default defineConfig({

  schema: "prisma/schema.prisma",

  datasource: {

    url: env("DIRECT_URL"),

  },

});

Set DIRECT_URL in your Netlify site's environment variables too, so that Prisma CLI commands that run during a deploy, such as the postinstall script below, can resolve it.

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"

  }

  //

}

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.

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.

Next, set up a Prisma Postgres instance:

1. Log in to Prisma Platform and open the Console.
2. In a 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. Generate a connection string and copy both the pooled value (host pooled.db.prisma.io) and the direct value (host db.prisma.io). Both start with postgres://.
9. Save both values, you'll need them in the next section: the pooled value becomes DATABASE_URL, the direct value becomes DIRECT_URL.

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

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 add prisma@prev --dev

pnpm add prisma@prev --save-dev

yarn add prisma@prev --dev

npm install prisma@prev --save-dev

4. Install the PostgreSQL driver adapter that Prisma Client uses to connect over TCP:

bun add @prisma/adapter-pg pg

pnpm add @prisma/adapter-pg pg

yarn add @prisma/adapter-pg pg

npm install @prisma/adapter-pg pg

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

bunx --bun prisma init

pnpm prisma init

yarn prisma init

npx prisma init

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

   generator client {
   
     provider = "prisma-client"
   
     output   = "../src/generated/prisma"
   
   }
   
   datasource db {
   
     provider = "postgresql"
   
   }
   
   model User { 
   
     id    Int     @id @default(autoincrement()) 
   
     name  String?
   
     email String  @unique
   
   } 

2. Open the newly created .env file and add the pooled connection string as DATABASE_URL and the direct connection string as DIRECT_URL, as shown above. Prisma Client uses the pooled value, the Prisma CLI uses the direct one.

3. Open the newly created prisma.config.ts file and point the datasource at DIRECT_URL. prisma init generates it with DATABASE_URL, which would send the migration and Studio commands below through the connection pooler:

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

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

bunx prisma migrate dev --name init

pnpm prisma migrate dev --name init

yarn prisma migrate dev --name init

npx prisma migrate dev --name init

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

bunx prisma studio

pnpm prisma studio

yarn prisma studio

npx prisma studio

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

import "dotenv/config";

import { PrismaPg } from "@prisma/adapter-pg";

import { PrismaClient } from "../src/generated/prisma/client";

const adapter = new PrismaPg({

  connectionString: process.env.DATABASE_URL,

});

const prisma = new PrismaClient({ adapter });

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, run the app locally:

bun run dev

pnpm run dev

yarn dev

npm run dev

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

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

{

  "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"

  },

  "dependencies": {

    "@netlify/blobs": "^8.1.0",

    "@prisma/adapter-pg": "^7.10.0",

    "@prisma/client": "^7.10.0",

    "blobshape": "^1.0.0",

    "bright": "^0.8.5",

    "markdown-to-jsx": "^7.4.5",

    "next": "15.1.6",

    "pg": "^8.16.3",

    "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.10.0",

    "tailwindcss": "^3.4.1"

  }

}

In this section, 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.

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.