Lesson 5 of 6 · about 20 minutes

A database without copy-pasting credentials

The win Your production URL returns the current time from a Postgres database, and you never saw, typed or pasted its password.

First, recall

The idea: let the provider write the variables

In Lesson 4 you carried a key from one website to another by hand. For databases there is a shorter path. A Marketplace integration creates the database and writes its connection details straight into your project's environment variables. The password goes from the provider to Vercel without passing through you.

This lesson uses Neon, a Postgres provider. It gives your project several variables. Two matter:

Functions start and stop constantly, and each one opens its own connection. The pooled URL puts a pooler in front of Postgres so those short-lived connections do not exhaust it. Your route uses DATABASE_URL.

Do it

1. Install the integration from the linked beachhead folder. Answer the prompts and choose the free plan; a browser tab may open for you to accept Neon's terms.

   vercel install neon

   One command “installs the integration if it isn't already on your team, provisions the resource, connects it to the currently linked project, and runs vercel env pull.”

2. See what appeared.

   vercel env ls

   DATABASE_URL and its relatives are listed for Production, Preview and Development. You did not add any of them.

3. Add the driver and one route.

   npm install @neondatabase/serverless

   app/api/db/route.ts

   import { neon } from "@neondatabase/serverless";
   
   export async function GET() {
     if (!process.env.DATABASE_URL) {
       return Response.json(
         { error: "DATABASE_URL is not set in this environment" },
         { status: 500 },
       );
     }
   
     const sql = neon(process.env.DATABASE_URL);
     const rows = await sql`SELECT now() AS server_time`;
   
     return Response.json({ serverTime: rows[0].server_time });
   }

4. Try it locally. Run npm run dev and open localhost:3000/api/db. You get a timestamp. /api/health now reports "hasDatabaseUrl":true.

5. Predict, then ship. Before you push, open your production /api/health.

   What does hasDatabaseUrl say in production right now, and why?

   false. The variables were added after that deployment was created. “Existing deployments do not get new or changed variables.”

   git add -A
   git commit -m "Add database probe"
   git push

   When the new deployment is ready, production /api/health says true and /api/db returns the time. That is the win.

6. Look at the database from the dashboard. Open the project, go to the Storage tab, select the database, open its Database section and choose the Query tab. Run SELECT 1;. You can inspect and edit data here without installing a database client.

Where this leaves the app

The beachhead now has the two things most first apps need: a model it can call and a place to keep data. Both credentials live in Vercel's environment variables, scoped per environment, and neither is in your repository.