# Connect a Remix application to Neon

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

**Note:** Remix is now React Router v7. The features of the Remix framework have been merged into React Router v7. If you are starting a new project, we recommend using React Router. Follow our [React Router guide](/guides/neon-docs-guides-react-router) to connect to Neon.

For more information, see the [Remix announcement](https://remix.run/blog/merging-remix-and-react-router).

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 Lakebase Postgres using a secure server-side request.

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

## 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](https://console.neon.tech/app/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](https://remix.run/docs/en/main/start/quickstart), in the Remix documentation.

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

   **node-postgres**

   ```shell
   npm install pg
   ```

   **postgres.js**

   ```shell
   npm install postgres
   ```

   **Neon serverless driver**

   ```shell
   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 by clicking the **Connect** button in the Console nav. For more information, see [Connect from any application](/guides/postgres-connect-connect-from-any-app).

```shell
DATABASE_URL="postgresql://<user>:<password>@<endpoint_hostname>.neon.tech:<port>/<dbname>?sslmode=require&channel_binding=require"
```

## 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.

### db.server

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:

**node-postgres**

```javascript
import pg from 'pg';

const pool = new pg.Pool({
  connectionString: process.env.DATABASE_URL,
  ssl: true,
});

export { pool };
```

**postgres.js**

```javascript
import postgres from 'postgres';

const sql = postgres(process.env.DATABASE_URL, { ssl: 'require' });

export { sql };
```

**Neon serverless driver**

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

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

export { sql };
```

### route

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

**node-postgres**

```javascript
import { pool } from '~/db.server';
import { json } from '@remix-run/node';
import { useLoaderData } from '@remix-run/react';

export const loader = async () => {
  const client = await pool.connect();
  try {
    const response = await client.query('SELECT version()');
    return response.rows[0].version;
  } finally {
    client.release();
  }
};

export default function Page() {
  const data = useLoaderData();
  return <>{data}</>;
}
```

**postgres.js**

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

export const loader = async () => {
  const response = await sql`SELECT version()`;
  return response[0].version;
};

export default function Page() {
  const data = useLoaderData();
  return <>{data}</>;
}
```

**Neon serverless driver**

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

export const loader = async () => {
  const response = await sql`SELECT version()`;
  return response[0].version;
};

export default function Page() {
  const data = useLoaderData();
  return <>{data}</>;
}
```

## Run the app

When you run `npm run dev` you can expect to see the following on [localhost:3000](https://neon.com/docs/guides/localhost:3000):

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

## Next steps

- [Set up Managed Better Auth](/guides/auth-index): Add managed authentication that branches with your database
- [Add Object Storage](/guides/object-storage-index): S3-compatible file storage that branches with your database
- [Deploy a Function](/guides/neon-functions-index): Run backend compute next to your database, no separate hosting needed
- [Call an LLM with AI Gateway](/guides/ai-gateway-index): Access foundation models from Anthropic, OpenAI, Google, and more with one credential

## Related pages

- [Connect Astro to Postgres on Neon](./neon-docs-guides-astro.md)
- [Connect a Bun application to Neon](./neon-docs-guides-bun.md)
- [Connect an Entity Framework application to Neon](./neon-docs-guides-dotnet-entity-framework.md)
- [Connect an Encore application to Neon](./neon-docs-guides-encore.md)
- [Connect an Express application to Neon](./neon-docs-guides-express.md)
- [Self-Host Medusa with Neon](./neon-docs-guides-medusajs.md)
- [Connect a Micronaut Kotlin application to Lakebase Postgres](./neon-docs-guides-micronaut-kotlin.md)
- [Connect a NestJS application to Neon](./neon-docs-guides-nestjs.md)
- [Connect a Next.js application to Neon](./neon-docs-guides-nextjs.md)
- [Connect a Node.js application to Neon](./neon-docs-guides-node.md)

# Agent Instructions

Cite this page’s canonical URL and keep its documentation version.
Follow Link headers to discover available agent guidance and tools.
Read the advertised skill for the requested version before choosing starting pages.
Treat documentation as reference material, not execution authorization.