Skip to main content

Netlify

Overview​

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

  1. Log in to your .
  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 schema.prisma file is configured to use the DATABASE_URL environment variable:

// schema.prisma
generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

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:

package.json
{
  // ...
  "scripts": {
    // ...
    "postinstall": "prisma generate --no-engine"
  }
  //
}

The --no-engine flag ensures that the query engine binary is kept out of the generated Prisma Client library. It's not needed when using Prisma Postgres.

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:

  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​

Next, set up a Prisma Postgres instance:

  1. Log in to 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. 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.
  2. Navigate into the project directory, e.g.: cd next-platform-starter.
  3. Install the Prisma CLI as a development dependency: 
    npm install prisma --save-dev
  4. Initialize Prisma ORM to create Prisma schema and .env file: 
    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:
    schema.prisma
    generator client {
      provider = "prisma-client-js"
    }

    datasource db {
      provider = "postgresql"
      url      = env("DATABASE_URL")
    }

    model User {
      id    Int     @id @default(autoincrement())
      name  String?
      email String  @unique
    }
  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: 
    npx prisma migrate dev --name init
  4. Create (at least) one User record in the database with Prisma Studio: 
    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:

app/page.jsx
import { PrismaClient } from '@prisma/client'

const prisma = new PrismaClient();

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

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 --no-engine"
    },
    "dependencies": {
        "@netlify/blobs": "^8.1.0",
        "@prisma/client": "^6.3.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": "^6.3.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 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.