Query Postgres in Next.js Server Actions

In this guide, you will learn the the process of creating a simple web application using Next.js Server Actions that allows you to capture user input via forms, and insert them into Postgres via @neondatabase/serverless and pg.

To create a Neon project and access it from an Next.js application:

• Create a Neon project
• Create a Next.js project and add dependencies
• Store your Neon credentials
• Create a Form with Server Actions
• Implement Next.js Server Actions
• 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 a Next.js project and add dependencies

1. Create an Next.js project if you do not have one. For instructions, see Automatic Installation in the Next.js documentation.

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

   Neon serverless driver

   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]"

Create a Form with Server Actions

Create a simple form that allows users to input a comment. For now, add an action named create that you will create in next step with Next.js server actions.

// File: app/page.tsx

export default function Page() {
  return (
    <form action={create}>
      <input type="text" placeholder="write a comment" name="comment" />
      <button type="submit">Submit</button>
    </form>
  );
}

Implement Next.js Server Actions

Now, let's add the server action to insert the data into your Postgres.

// File: app/page.tsx

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

export default function Page() {
  async function create(formData: FormData) {
    'use server';
    // Create an instance of Neon's TS/JS driver
    const sql = neon(`${process.env.DATABASE_URL}`);
    // Create the comments table if it does not exist
    await sql('CREATE TABLE IF NOT EXISTS comments (comment TEXT)');
    const comment = formData.get('comment');
    // Insert the comment from the form into the Postgres (powered by Neon)
    await sql('INSERT INTO comments (comment) VALUES ($1)', [comment]);
  }
  return (
    <form action={create}>
      <input type="text" placeholder="write a comment" name="comment" />
      <button type="submit">Submit</button>
    </form>
  );
}

Run the app

Execute the following command to run your application locally:

npm run dev