Ship faster with database branching workflows: Add prod-like data to your preview and local dev environments.
Getting Started/Framework quickstarts

Connect a Remix application to Neon

Set up a Neon project in seconds and connect from a Remix application

Remix is an open-source full stack JavaScript framework that lets you focus on building out the user interface using familiar web standards. This guide explains how to connect Remix with Neon using a secure server-side request.

To create a Neon project and access it from a Remix application:

  1. Create a Neon project
  2. Create a Remix 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 a Remix project and add dependencies

  1. Create a Remix project if you do not have one. For instructions, see Quick Start, in the Remix documentation.

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

    Neon serverless driver
    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.


Configure the Postgres client

There are two parts to connecting a Remix application to Neon. The first is db.server. Remix will ensure any code added to this file won't be included in the client bundle. The second is the route where the connection to the database will be used.


Create a db.server.ts file at the root of your /app directory and add the following code snippet to connect to your Neon database:

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

const sql = neon(process.env.DATABASE_URL);

export { sql };


Create a new route in your app/routes directory and import the db.server file.

Neon serverless driver
import { json } from '@remix-run/node';
import { useLoaderData } from '@remix-run/react';
import { sql } from '~/db.server';

export const loader = async () => {
  const response = await sql`SELECT version()`;
  return json({ data: response });

export default function Page() {
  const data = useLoaderData();

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'

Need help?

Join our Discord Server to ask questions or see what others are doing with Neon. Users on paid plans can open a support ticket from the console. For more detail, see Getting Support.

Last updated on

Edit this page
Was this page helpful?