Correct way of connecting Neon with Drizzle and NextAuth, to be hosted on Vercel

Support
1

Hi, I am trying to host a Next.js 13 site with the new app router (using Neon and Drizzle) on Vercel, and I am slightly confused. Drizzle ORM docs suggest this snippet:

import { neon, neonConfig } from '@neondatabase/serverless';
import { drizzle } from 'drizzle-orm/neon-http';
 
neonConfig.fetchConnectionCache = true;
 
const sql = neon(process.env.DRIZZLE_DATABASE_URL!);
const db = drizzle(sql);
 
const result = await db.select().from(...);

But at the same time, they mention " If you’re about to use Neon from a serverfull environments, according to their official nodejs docs(opens in a new tab) you should just use PostgresJS driver", in which case I connect like this:

import { drizzle, PostgresJsDatabase } from 'drizzle-orm/postgres-js';
import { migrate } from 'drizzle-orm/postgres-js/migrator';
import postgres from 'postgres';
 
// for migrations
const migrationClient = postgres("postgres://postgres:adminadmin@0.0.0.0:5432/db", { max: 1 });
migrate(drizzle(migrationClient), ...)
 
// for query purposes
const queryClient = postgres("postgres://postgres:adminadmin@0.0.0.0:5432/db");
const db: PostgresJsDatabase = drizzle(queryClient);
await db.select().from(...)...

Which one is more appropriate, in case I want my Next.js 13 app to live on Vercel?
Many thanks!

2

If you are looking for ephemeral compute, the neon driver.
PostgreSQL connections are made over TCP, and serverless platforms (and Vercel Edge Functions) don’t talk TCP, they use HTTP or WebSockets.

3

If you can use Cloudflare worker, that supports TCP connection.

4

Thank you for the answers. I am currently connecting like this:

import { env } from "@/env.mjs"
import { neonConfig, Pool } from "@neondatabase/serverless"
import { PrismaNeon } from "@prisma/adapter-neon"
import { PrismaClient } from "@prisma/client"
import ws from "ws"

neonConfig.webSocketConstructor = ws as unknown as typeof WebSocket

const connectionString = env.DATABASE_URL

const pool = new Pool({ connectionString })
const adapter = new PrismaNeon(pool)

export const prisma = new PrismaClient({ adapter })

It seems to work well, but one thing I am unsure of is whether it’s fine to export prisma variable and import it wherever I need to do some database related stuff in my app. Is this a correct approach?

I am also trying to make it work with the experimental Next-Auth v.5, which is runtime agnostic and should work with Edge. Has anyone tried it already or seen a similar set up? Wold love to see an example. Thank you again for the answers!

5

Exporting the prisma instance aallows you to share a single instance of PrismaClient across your application, which is beneficial for connection pooling; each instance of PrismaClient maintains a connection pool.

Just make sure to close the connections when they are no longer needed (like when your application is shutting down) to free up resources.

6

Thank you Brendan. Thank you again for your answers. I was able to successfully set up several branches in my gitHub repo, containing several different configurations, such as:

  1. Next 13, Next-Auth, Neon’s Postgres, Primsa 5

  2. Next 13, Next-Auth, PlanetScale’s MySQL, Prisma 5

  3. Next 13, Next-Auth, PlanetScale’s MySQL, Drizzle

I am failing to set up an equivalent configuration for Neon’s Postgres with Drizzle(next-auth-drizzle-neon-postgres branch). The logic is exactly the same and code is nearly identical for all of these branches, which makes the issue even weirder and I am not able to spot what is causing it.

I had a discussion with Drizzle’s team today on their Discord channel, which you can read here, and we stopped at questioning whether I am connecting in a right way. Here is how I connect:

import * as auth from "@/db/schemas/auth.schema"
import { env } from "@/env.mjs"
import { neon, neonConfig } from "@neondatabase/serverless"
import { drizzle } from "drizzle-orm/neon-http"

neonConfig.fetchConnectionCache = true

const schema = { ...auth }
const sql = neon(env.DATABASE_URL)

export const db = drizzle(sql, {
  schema,
})

The project is based on Next 13 with app directory and I intend to host it on Vercel, which ade me think I should problebly use @neondatabase/serverless package. I followed the guide for connecting with Neon at Drizzle’s website (docs/quick-postgresql/neon) , which suggested the above is a correct connection method. Indeed, there are no warnings, TypeScript errors, linting errors, or any errors at all, and - as I mentioned- identical logic works for the other branches, which confirms that my code is fine.

For some weird reason though, I keep getting undefined, even though the syntax and code is fine, as I followed Drizzle’s documentation and confirmed with their team it is correct. Again, the issue details are described in the discussion on their Discord channel , and the code is public on my GitHub.

Would you mind confirming the connection method and packages used for that purpose are correct? Or perhaps suggest how I should be handling this instead?

Would you be able to spot why everything works fine for all the other configurations, but fails for the pairing of Drizzle and Neon?

Thank you!

7

If anyone stumbles upon similar problem, the cause turned out to be Next.js cache.
Since Next 14, adding noStore() to my server actions involving Drizzle calls to Neon’s Postgres database (as described in the official Next 14 guide here) solved the problem.