> ## Documentation Index
> Fetch the complete documentation index at: https://docs.jtbdos.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Switch to Prisma Postgres

> How to change the database provider to Prisma Postgres.

export const Authors = ({data}) => {
  const baseUrl = typeof window !== 'undefined' && window.location.origin.includes('localhost') ? '' : 'https://raw.githubusercontent.com/haydenbleasel/JTBDOS/refs/heads/main/docs';
  return <div style={{
    marginBottom: '3rem',
    display: 'flex',
    flexDirection: 'column',
    gap: '0.5rem'
  }}>
      <span style={{
    color: 'rgb(107, 114, 128)',
    fontSize: '0.875rem'
  }}>Co-authored by</span>
      <div style={{
    display: 'flex',
    flexWrap: 'wrap',
    alignItems: 'center',
    gap: '0.5rem'
  }}>
        {data.map(author => <div key={author.name} style={{
    padding: '0.75rem',
    paddingRight: '1rem',
    display: 'inline-flex',
    alignItems: 'center',
    gap: '0.75rem',
    fontWeight: 'normal',
    position: 'relative',
    ringWidth: '2px',
    ringColor: 'transparent',
    borderRadius: '0.75rem',
    backgroundColor: 'white',
    border: '1px solid rgba(0,0,0,0.1)',
    overflow: 'hidden'
  }}>
            <div style={{
    position: 'relative'
  }}>
              <div style={{
    overflow: 'hidden',
    border: '1px solid #e5e7eb',
    borderRadius: '9999px',
    width: '2rem',
    height: '2rem'
  }}>
                <img style={{
    margin: 0,
    width: '100%',
    height: '100%',
    objectFit: 'cover'
  }} src={`${baseUrl}/images/authors/${author.company.id}/${author.user.id}.jpg`} alt="" width={32} height={32} />
              </div>
              <div style={{
    position: 'absolute',
    border: '1px solid white',
    overflow: 'hidden',
    borderRadius: '9999px',
    objectFit: 'cover',
    width: '1rem',
    height: '1rem',
    right: '-0.25rem',
    bottom: '-0.25rem'
  }}>
                <img style={{
    margin: 0,
    width: '100%',
    height: '100%',
    objectFit: 'cover'
  }} src={`${baseUrl}/images/authors/${author.company.id}/logo.jpg`} alt="" width={16} height={16} />
              </div>
            </div>
            <div style={{
    display: 'flex',
    flexDirection: 'column'
  }}>
              <span style={{
    fontWeight: 600,
    lineHeight: 1.25,
    fontSize: '13px',
    letterSpacing: '-0.01em'
  }}>
                {author.user.name}
              </span>
              <span style={{
    color: 'rgb(107, 114, 128)',
    lineHeight: 1.25,
    fontSize: '11px'
  }}>
                {author.company.name}
              </span>
            </div>
          </div>)}
      </div>
    </div>;
};

<Authors
  data={[{
user: {
name: 'Hayden Bleasel',
id: 'haydenbleasel',
},
company: {
name: 'JTBDOS',
id: 'JTBDOS',
},
}, {
user: {
name: 'Nikolas Burk',
id: 'nikolasburk',
},
company: {
name: 'Prisma',
id: 'prisma',
},
}]}
/>

Here's how to switch from Neon to [Prisma Postgres](https://www.prisma.io/postgres) — a serverless database with zero cold starts and a generous free tier. You can learn more about its architecture that enables this [here](https://www.prisma.io/blog/announcing-prisma-postgres-early-access).

## 1. Create a new Prisma Postgres instance

Start by creating a new Prisma Postgres instance via the [Prisma Data Platform](https://console.prisma.io/) and get your connection string. It will look something like this:

```
prisma+postgres://accelerate.prisma-data.net/?api_key=ey....
```

## 2. Update your environment variables

Update your environment variables to use the new Prisma Postgres connection string:

```js apps/database/.env
DATABASE_URL="prisma+postgres://accelerate.prisma-data.net/?api_key=ey...."
```

## 3. Swap out the required dependencies in `@repo/database`

Uninstall the existing dependencies...

```sh Terminal
pnpm remove @neondatabase/serverless @prisma/adapter-neon ws @types/ws
```

... and install the new dependencies:

```sh Terminal
pnpm add @prisma/extension-accelerate
```

## 4. Update the database connection code

Update the database connection code to use the new Prisma Postgres adapter:

```ts packages/database/index.ts {4,7}
import 'server-only';

import { env } from '@repo/env';
import { withAccelerate } from '@prisma/extension-accelerate';
import { PrismaClient } from '@prisma/client';

export const database = new PrismaClient().$extends(withAccelerate());
```

Your project is now configured to use your Prisma Postgres instance for migrations and queries.

## 5. Explore caching and real-time database events

Note that thanks to the first-class integration of other Prisma products, Prisma Postgres comes with additional features out-of-the-box that you may find useful:

* [Prisma Accelerate](https://www.prisma.io/accelerate): Enables connection pooling and global caching
* [Prisma Pulse](https://www.prisma.io/pulse): Enables real-time streaming of database events

### Caching

To cache a query with Prisma Client, you can add the [`swr`](https://www.prisma.io/docs/accelerate/caching#stale-while-revalidate-swr) and [`ttl`](https://www.prisma.io/docs/accelerate/caching#time-to-live-ttl) options to any given query, for example:

```ts page.tsx
const pages = await prisma.page.findMany({
  swr: 60, // 60 seconds
  ttl: 60  // 60 seconds
});
```

Learn more in the [Accelerate documentation](https://www.prisma.io/docs/accelerate).

### Real-time database events

To stream database change events from your database, you first need to install the Pulse extension:

```sh Terminal
pnpm add @prisma/extension-pulse
```

Next, you need to add your Pulse API key as an environment variable:

```ts apps/database/.env
PULSE_API_KEY="ey...."
```

<Info>
  You can find your Pulse API key in your Prisma Postgres connection string, it's the value of the `api_key` argument and starts with `ey...`. Alternatively, you can find the API key in your [Prisma Postgres Dashboard](https://console.prisma.io).
</Info>

Then, update the `env` package to include the new `PULSE_API_KEY` environment variable:

```ts packages/env/index.ts {3,11}
export const server = {
  // ...
  PULSE_API_KEY: z.string().min(1).startsWith('ey'),
};

export const env = createEnv({
  client,
  server,
  runtimeEnv: {
    // ...
    PULSE_API_KEY: process.env.PULSE_API_KEY,
  },
});
```

Finally, update the database connection code to include the Pulse extension:

```ts packages/database/index.ts {2, 7-9}
import 'server-only';
import { withPulse } from '@prisma/extension-pulse';
import { withAccelerate } from '@prisma/extension-accelerate';
import { PrismaClient } from '@prisma/client';
import { env } from '@repo/env';

export const database = new PrismaClient()
  .$extends(withAccelerate())
  .$extends(withPulse({ apiKey: env.PULSE_API_KEY })) ;
```

You can now stream any change events from your database using the following code:

```ts page.tsx
const stream = await prisma.page.stream();

console.log(`Waiting for an event on the \`Page\` table ... `);

for await (const event of stream) {
  console.log('Received an event:', event);
}
```

Learn more in the [Pulse documentation](https://www.prisma.io/docs/pulse).