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

# Next.js Prisma Quickstart

> Connect a Next.js app to DBHost with Prisma and query PostgreSQL through the pooled database URL.

If you want a practical way to add PostgreSQL to a Next.js app without running your own database server, DBHost gives you a pooled connection string, a dashboard, and daily backups. Pro and Business add API and CLI access when you need to automate later.

This quickstart keeps to the shortest useful path: one DBHost database, one Prisma client, and one server-side query.

**Best fit:** Small SaaS apps, internal tools, and staging environments that want PostgreSQL working quickly without owning database operations.

**Not for:** Teams that need to manage their own Postgres host, OS, or custom network setup from day one.

If Prisma is not the right abstraction for this app, use the broader [Next.js + PostgreSQL guide](/guides/nextjs-postgres) to choose between Prisma, Drizzle, and plain `pg`.

## What you need

* A DBHost account and one active database
* A Next.js app
* Node.js 18 or later
* Prisma packages installed in the app

<Note>
  DBHost exposes PostgreSQL through PgBouncer on port `6432`. Prisma works with
  pooled PostgreSQL connections, and Prisma’s PgBouncer guide covers advanced
  migration setups if you need them later.
</Note>

## 1. Create a database in DBHost

Create a database from the dashboard, then copy the connection string from the database detail page.

If you are setting up a new project, the DBHost quickstart is still the fastest first step. It gives you the host, port, username, and password you need before you touch your app code.

## 2. Install Prisma

From your Next.js project:

```bash theme={null}
npm install prisma @prisma/client
npx prisma init
```

That creates the Prisma schema files and gives you a place to define your PostgreSQL connection.

## 3. Point Prisma at DBHost

Add the DBHost connection string to `.env.local` or the environment file your app already uses:

```bash theme={null}
DATABASE_URL="postgresql://uabc123_my_project:PASSWORD@db.dbhost.app:6432/uabc123_my_project?sslmode=verify-full&pgbouncer=true"
```

Use the exact connection details from DBHost. The `?pgbouncer=true` flag keeps the pooled connection explicit for Prisma setups that need it.

## 4. Define a simple schema

Start with a minimal model:

```prisma theme={null}
generator client {
  provider = "prisma-client-js"
}

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

model Project {
  id        String   @id @default(cuid())
  name      String
  createdAt DateTime @default(now())
}
```

Then push the schema:

```bash theme={null}
npx prisma db push
npx prisma generate
```

`db push` is enough for a quickstart. If your team already uses a different Prisma migration flow, keep that workflow and keep the pooled DBHost URL in place.

## 5. Create a reusable Prisma client

In a Next.js app router project, keep the client in one shared file:

```ts theme={null}
// app/lib/prisma.ts
import { PrismaClient } from "@prisma/client";

const globalForPrisma = globalThis as unknown as {
  prisma?: PrismaClient;
};

export const prisma =
  globalForPrisma.prisma ??
  new PrismaClient({
    log: ["error"],
  });

if (process.env.NODE_ENV !== "production") {
  globalForPrisma.prisma = prisma;
}
```

This keeps development hot reloads from creating a new database client on every refresh.

## 6. Query from a server component

```tsx theme={null}
// app/page.tsx
import { prisma } from "./lib/prisma";

export default async function HomePage() {
  const projects = await prisma.project.findMany({
    orderBy: { createdAt: "desc" },
    take: 5,
  });

  return (
    <main>
      <h1>Projects</h1>
      <ul>
        {projects.map((project) => (
          <li key={project.id}>{project.name}</li>
        ))}
      </ul>
    </main>
  );
}
```

That is enough to verify the database connection, the Prisma schema, and the Next.js render path in one go.

## When DBHost helps most

* You want PostgreSQL to work with Prisma without managing a VPS
* You want the pooled connection ready on day one
* You want backups and password resets from the dashboard later
* You expect to automate database creation or backup triggers on Pro or Business through the published CLI or REST API

## Next steps

<Columns cols={2}>
  <Card title="Start for Free" icon="rocket" href="https://dbhost.app/sign-up?utm_source=docs&utm_medium=guide&utm_campaign=nextjs_prisma&utm_content=start_for_free">
    Create a DBHost account and provision your first database.
  </Card>

  <Card title="Compare Next.js Paths" icon="layers" href="/guides/nextjs-postgres">
    See when Prisma, Drizzle, or plain `pg` is the better fit for your app.
  </Card>
</Columns>

* See the [DBHost quickstart](/quickstart) for the shortest path to your first database.
* See the [Next.js + PostgreSQL guide](/guides/nextjs-postgres) if you want to compare Prisma with Drizzle or plain `pg`.
* See the [CLI](/cli) if you want to script database actions from your terminal.
* See the [API reference](/api-reference/introduction) if your deployment pipeline already speaks HTTP.