Neon

In this guide, you will learn how to create a simple web application using Next.js Server Actions that captures user input via forms and inserts it into Postgres using the @neondatabase/serverless driver.

Start by connecting to a project. If you don't already have a project to connect to, you can create one. See Automatic Installation in the Next.js documentation for instructions. Please note that the following example uses App Router, so be sure use that option if creating a new Next.js project.

Run vercel env pull .env.development.local to make the latest environment variables available to your project locally.

Run npm install @neondatabase/serverless to install the Neon serverless driver for connecting to your Neon database.

For more about our driver, see Neon serverless driver.

Navigate to the Neon SQL Editor in the Neon Console and create the application database by running this SQL command:

1
CREATE TABLE IF NOT EXISTS comments (comment TEXT);

You can access the Neon Console from the Storage tab on your Vercel Dashboard. Select Open in Neon Console.

Create a form that allows users to input a comment with a Server Action action named create that inserts data into your Postgres database.

1
// File: app/page.tsx
2
import { neon } from '@neondatabase/serverless';
3

4
export default function Page() {
5
  async function create(formData: FormData) {
6
    'use server';
7
    // Connect to the Neon database
8
    const sql = neon(`${process.env.DATABASE_URL}`);
9
    const comment = formData.get('comment');
10
    // Insert the comment from the form into the Postgres database
11
    await sql('INSERT INTO comments (comment) VALUES ($1)', [comment]);
12
  }
13

14
  return (
15
    <form action={create}>
16
      <input type="text" placeholder="write a comment" name="comment" />
17
      <button type="submit">Submit</button>
18
    </form>
19
  );
20
}

Execute the following command to run your application locally:

1
npm run dev

Navigate to http://localhost:3000 to see the comment form. Try inserting a comment. You can query your database directly from the Neon SQL Editor to validate that your application works:

1
SELECT * FROM comments;

In this guide, you will learn how to connect SvelteKit with Neon over a secure server-side request using the @neondatabase/serverless driver.

Start by connecting to a SvelteKit project. If you don't already have a project to connect to, you can create one. For instructions, see Creating a project in the SvelteKit documentation.

Run vercel env pull .env.development.local to make the latest environment variables available to your project locally.

Run npm install @neondatabase/serverless to install the Neon serverless driver for connecting to your Neon database.

For more about our driver, see Neon serverless driver.

In your server routes (+server.js files), use the following code snippet to connect to your Neon database:

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

3
const connectionString: string = process.env.DATABASE_URL as string;
4
const sql = neon(connectionString);
5

6
export async function load() {
7
    const response = await sql`SELECT version()`;
8
    const { version } = response[0];
9
    return {
10
        version,
11
    };
12
}

In your +page.svelte files, use the following code snippet to fetch data from your server:

1
<script>
2
    export let data;
3
</script>
4

5
<h1>Database Version</h1>
6
<p>{data.version}</p>

Execute the following command to run your application locally:

1
npm run dev

You can expect to see output similar to the following when you visit localhost:5173:

1
Database Version
2
PostgreSQL 17.2 on x86_64-pc-linux-gnu, compiled by gcc (Debian 12.2.0-14) 12.2.0, 64-bit

You can find the source code for the application described in this guide on GitHub. See Get started with Svelte and Neon.

In this guide, you will learn how to make server-side queries to Postgres from .astro files using the @neondatabase/serverless driver.

Start by connecting to a project. If you don't already have a project to connect to, you can create one. See Installation and Setup in the Astro documentation for instructions.

Run vercel env pull .env.development.local to make the latest environment variables available to your project locally.

Run npm install @neondatabase/serverless to install the Neon serverless driver for connecting to your Neon database.

For more about our driver, see Neon serverless driver.

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

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

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

6
const response = await sql`SELECT version()`;
7
const data = response[0].version;
8
---
9

10
{data}

Execute the following command to run your application locally:

1
npm run dev

You can expect to see output similar to the following when you visit localhost:4321:

1
PostgreSQL 16.0 on x86_64-pc-linux-gnu, compiled by gcc (Debian 10.2.1-6) 10.2.1 20210110, 64-bit

You can find the source code for the application described in this guide on GitHub. See Get started with Astro and Neon.

In this guide, you will learn how to connect SolidStart with Neon over a secure server-side request using the @neondatabase/serverless driver.

Start by connecting to a project. If you don't already have a project to connect to, you can create one. See Getting Started in the SolidStart documentation for instructions.

Run vercel env pull .env.development.local to make the latest environment variables available to your project locally.

Run npm install @neondatabase/serverless to install the Neon serverless driver for connecting to your Neon database.

For more about our driver, see Neon serverless driver.

To load data on the server in SolidStart, add the following code to your application to connect to your Neon database:

1
import { neon } from "@neondatabase/serverless";
2
import { createAsync } from "@solidjs/router";
3

4
const getVersion = async () => {
5
    "use server";
6
    const sql = neon(`${process.env.DATABASE_URL}`);
7
    const response = await sql`SELECT version()`;
8
    const { version } = response[0];
9
    return version;
10
}
11

12
export const route = {
13
  load: () => getVersion(),
14
};
15

16
export default function Page() {
17
  const version = createAsync(() => getVersion());
18
  return <>{version()}</>;
19
}

Run the following command to run your application locally:

1
npm run dev

You can expect to see output similar to the following on localhost:3000:

1
PostgreSQL 16.0 on x86_64-pc-linux-gnu, compiled by gcc (Debian 10.2.1-6) 10.2.1 20210110, 64-bit

You can find the source code for the application described in this guide on GitHub. See Get started with SolidStart and Neon.

In this guide, you will learn how to connect a Nuxt.js application to Neon using a server route and the @neondatabase/serverless driver.

Start by connecting to a Nuxt.js project. If you don't already have one, you can create one by running: npx nuxi@latest init <project-name>.

Run vercel env pull .env.development.local to make the latest environment variables from your Vercel project available locally.

Run npm install @neondatabase/serverless to install the Neon serverless driver for connecting to your Neon database.

For more about our driver, see Neon serverless driver.

In Nuxt, server-side logic resides in the server/api/ directory. Create a new file, server/api/version.get.ts, to define an API endpoint that connects to Neon and fetches the database version.

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

3
export default defineEventHandler(async () => {
4
  const sql = neon(process.env.DATABASE_URL!);
5
  const [response] = await sql`SELECT version()`;
6
  return { version: response.version };
7
});

In your app.vue file, use the useFetch composable to call your new API endpoint and display the data returned from the database. Note that data.version should be enclosed in double curly brackets only. The brackets are escaped in the following example for display purposes. The escape characters (/) should not be used in your code.

1
    <script setup>
2
    const { data, error } = await useFetch('/api/version');
3
    </script>
4

5
    <template>
6
      <div>
7
        <h1>Database Version</h1>
8
        <p v-if="data">/{/{data.version/}/}</p>
9
        <p v-else-if="error">Error fetching version</p>
10
      </div>
11
    </template>

Execute the following command to run your application locally:

1
npm run dev

Navigate to http://localhost:3000. You can expect to see an output similar to the following:

1
Database Version
2
PostgreSQL 17.5 on x86_64-pc-linux-gnu, compiled by gcc (Debian 12.2.0-14+deb12u1) 12.2.0, 64-bit

You can find the source code for the application described in this guide on GitHub. See Get started with Nuxt.js and Neon.