# Connect a TanStack Start application to Neon

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

Pre-built prompt for connecting TanStack Start applications to Lakebase Postgres [View prompt](https://neon.com/prompts/tanstack-start-prompt)

TanStack Start is an open-source, fully type-safe web framework for building feature rich React and Solid based applications using the TanStack ecosystem.

To create a project on Neon and access it from a Start 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 Start project and add dependencies

1. Create a Start project if you do not have one. For instructions see the [quick start guides](https://tanstack.com/start/latest), in the [TanStack](https://tanstack.com/) 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 your Neon database connection string by clicking the **Connect** button in the Console nav to open the **Connect to your branch** modal. 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"
```

If you haven't created a project yet, [Claimable Neon](https://neon.com/claimable-neon) provisions a temporary Neon project without an account. A human can claim the project into a Neon account before it expires. See [Claimable Neon](/guides/building-on-neon-reference-claimable-neon).

## Configure the Postgres client

There are multiple ways to make server side requests with TanStack Start. See below for the different implementations.

### Server Functions

In your server functions, add the following code snippet to connect to your Neon database:

**node-postgres**

```typescript filename="src/data/get-neon-data.ts"
import { Pool } from 'pg';
import { createServerFn } from "@tanstack/react-start";

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

export const getData = createServerFn({ method: "GET" }).handler(async () => {
  const client = await pool.connect();
  try {
    const { rows } = await client.query('SELECT version()');
    return rows[0].version;
  } finally {
    client.release();
  }
});
```

**postgres.js**

```typescript filename="src/data/get-neon-data.ts"
import postgres from 'postgres';
import { createServerFn } from "@tanstack/react-start";

export const getData = createServerFn({ method: "GET" }).handler(async () => {
   const sql = postgres(process.env.DATABASE_URL, { ssl: 'require' });
  const response = await sql`SELECT version()`;
  return response[0].version;
});
```

**Neon serverless driver**

```typescript filename="src/data/get-neon-data.ts"
import { neon } from "@neondatabase/serverless";
import { createServerFn } from "@tanstack/react-start";

export const getData = createServerFn({ method: "GET" }).handler(async () => {
  const sql = neon(process.env.DATABASE_URL);
  const response = await sql`SELECT version()`;

  return response[0].version;
});
```

Then consume the data in your start application, like you would normally, with any other data fetching operation.

```typescript filename="src/routes/index.tsx"
import { createFileRoute } from "@tanstack/react-router";
import { getData } from "../data/get-neon-data.ts";

export const Route = createFileRoute("/")({
  loader: async () => {
    return getData();
  },

  component: RouteComponent,
});

export default function RouteComponent() {
  const data = Route.useLoaderData();

  return <>{data}</>;
}
```

### Static Server Functions

In your static server functions, add the following code snippet to connect to your Neon database:

**node-postgres**

```typescript filename="src/data/get-neon-data.ts"
import { Pool } from 'pg';
import { createServerFn } from "@tanstack/react-start";
import { staticFunctionMiddleware } from "@tanstack/start-static-server-functions";

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

export const getData = createServerFn({ method: "GET" })
.middleware([staticFunctionMiddleware])
.handler(async () => {
  const client = await pool.connect();
  try {
    const { rows } = await client.query('SELECT version()');
    return rows[0].version;
  } finally {
    client.release();
  }
});
```

**postgres.js**

```typescript filename="src/data/get-neon-data.ts"
import postgres from 'postgres';
import { createServerFn } from "@tanstack/react-start";
import { staticFunctionMiddleware } from "@tanstack/start-static-server-functions";

export const getData = createServerFn({ method: "GET" })
.middleware([staticFunctionMiddleware])
.handler(async () => {
  const sql = postgres(process.env.DATABASE_URL, { ssl: 'require' });
  const response = await sql`SELECT version()`;
  return response[0].version;
});
```

**Neon serverless driver**

```typescript filename="src/data/get-neon-data.ts"
import { neon } from "@neondatabase/serverless";
import { createServerFn } from "@tanstack/react-start";
import { staticFunctionMiddleware } from "@tanstack/start-static-server-functions";

export const getData = createServerFn({ method: "GET" })
.middleware([staticFunctionMiddleware])
.handler(async () => {
  const sql = neon(process.env.DATABASE_URL);
  const response = await sql`SELECT version()`;

  return response[0].version;
});
```

Then like before you can consume the data in your components.

_Be aware Static Server Functions are executed at build time, and cached as a static asset for pre-rendering or static generation_.

```typescript filename="src/routes/index.tsx"
import { createFileRoute } from "@tanstack/react-router";
import { getData } from "../data/get-neon-data.ts";

export const Route = createFileRoute("/")({
  loader: async () => {
    return getData();
  },

  component: RouteComponent,
});

export default function RouteComponent() {
  const data = Route.useLoaderData();

  return <>{data}</>;
}
```

## Run the app

When you run `npm run dev` you can expect to see the following on [localhost:3000](http://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
```

### Where to upload and serve files?

Neon does not provide a built-in file storage service. For managing binary file data (blobs), we recommend using dedicated, specialized storage services. Follow our guide on [File Storage](/guides/integrations-tooling-guides-file-storage) to learn more about how to store files in external object storage and file management services and track metadata in Neon.

## Source code

You can find the source code for the applications described in this guide on GitHub.

- [Get started with TanStack Start Server Functions and Neon](https://github.com/neondatabase/examples/tree/main/with-tanstack-start-server-functions): Get started with TanStack Start Server Functions and Neon
- [Get started with TanStack Start Static Server Functions and Neon](https://github.com/neondatabase/examples/tree/main/with-tanstack-start-static-server-functions): Get started with TanStack Start Static Server Functions and Neon

## Next steps

- [Set up Managed Better Auth](/guides/auth-quick-start-tanstack-router): 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

- [AI tools for Agents](./ai-agents-on-neon-index.md)
- [APIs & SDKs](./apis-sdks-index.md)
- [Changelog](../changelog.md)
- [Integrating with Neon](./building-on-neon-index.md)
- [Lakebase Postgres](./postgres-index.md)
- [Managed Better Auth](./auth-index.md)
- [More](./more-index.md)
- [Neon AI Gateway](./ai-gateway-index.md)
- [Neon community](./community-index.md)
- [Neon documentation](./neon-docs-index.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.