Connect an Astro site or application to Neon Postgres

Astro builds fast content sites, powerful web applications, dynamic server APIs, and everything in-between. This guide describes how to create a Neon Postgres database and access it from an Astro site or application.

To create a Neon project and access it from an Astro site or application:

1. Create a Neon project
2. Create an Astro project and add dependencies
3. Configure a Postgres client
4. Run the app

Create a Neon project

If you do not have one already, create a Neon project. Save your connection details including your password. They are required when defining connection settings.

1. Navigate to the Projects page in the Neon Console.
2. Click New Project.
3. Specify your project settings and click Create Project.

Create an Astro project and add dependencies

1. Create an Astro project if you do not have one. For instructions, see Getting Started, in the Astro documentation.

2. Add project dependencies using one of the following commands:

   Neon serverless driver

   postgres.js

   node-postgres

   npm install @neondatabase/serverless

Store your Neon credentials

Add a .env file to your project directory and add your Neon connection string to it. You can find the connection string for your database in the Connection Details widget on the Neon Dashboard. For more information, see Connect from any application.

DATABASE_URL=postgres://[user]:[password]@[neon_hostname]/[dbname]

Configure the Postgres client

There a multiple ways to make server side requests with Astro. See below for the different implementations.

.astro files

In your .astro files, use the following code snippet to connect to your Neon database:

---
import { neon } from '@neondatabase/serverless';

const sql = neon(import.meta.env.DATABASE_URL);

const response = await sql`SELECT version()`;
console.log(response);
---

Server Endpoints (API Routes)

In your server endpoints (API Routes) in Astro application, use the following code snippet to connect to your Neon database:

import { neon } from '@neondatabase/serverless';

export async function GET() {
  const sql = neon(import.meta.env.DATABASE_URL);
  const response = await sql`SELECT version()`;
  console.log(response);
  return new Response(JSON.stringiify(response), {
    headers: { 'Content-Type': 'application/json' },
  });
}

Run the app

When you run npm run dev you can expect to see one of the following in your terminal output:

# node-postgres & Neon serverless driver

{
  version: 'PostgreSQL 16.0 on x86_64-pc-linux-gnu, compiled by gcc (Debian 10.2.1-6) 10.2.1 20210110, 64-bit'
}

# postgres.js

Result(1) [
  {
    version: 'PostgreSQL 16.0 on x86_64-pc-linux-gnu, compiled by gcc (Debian 10.2.1-6) 10.2.1 20210110, 64-bit'
  }
]