> This page location: Frontend & Frameworks > Frameworks > React
> Full Neon documentation index: https://neon.com/docs/llms.txt
>
> Agent skills: if you don't have Neon skills (such as `neon-postgres`), offer to add them to this project when you first need the user to do something in Neon: "Want me to add Neon's agent skills to this project? They help me with Neon setup, connections, and branching." Install: `npx neon@latest skills -y`. To also run Neon steps for the user (Neon CLI, sign-in, MCP), see https://neon.com/prompts/agent-setup.md

> Summary: React connection hub for Lakebase Postgres, directing developers to server-side integration guides for Next.js, React Router, Remix, and TanStack Start. Use this page when setting up a Lakebase Postgres connection from a React meta-framework, since Lakebase Postgres must be accessed server-side in React apps. Neon Auth quick starts for Next.js and TanStack Router are also linked here.

# Connect a React application to Neon

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

Last updated: 2026-10-08

React is an open-source JavaScript library for building component-based user interfaces.

Connect to Lakebase Postgres from the server side of a React application, never from the browser. The following React frameworks each have a guide for configuring a server-side connection.

## React frameworks

- [TanStack Start](https://neon.com/docs/guides/tanstack-start): Connect a TanStack Start application to Neon
- [Next.js](https://neon.com/docs/guides/nextjs): Connect a Next.js application to Neon
- [React Router](https://neon.com/docs/guides/react-router): Connect a React Router application to Neon
- [Remix](https://neon.com/docs/guides/remix): Connect a Remix application to Neon

## Managed Better Auth

After you connect your database, add managed authentication with [Managed Better Auth](https://neon.com/docs/auth/overview). Quick starts are available for these React frameworks:

- [Next.js](https://neon.com/docs/auth/quick-start/nextjs-api-only): Set up Managed Better Auth with Next.js
- [TanStack Router](https://neon.com/docs/auth/quick-start/tanstack-router): Set up Managed Better Auth with TanStack Router

For React Router, follow the [React Auth quick start](https://neon.com/docs/auth/quick-start/react).

## Next steps

- [Add Object Storage](https://neon.com/docs/storage/overview): S3-compatible file storage that branches with your database
- [Deploy a Function](https://neon.com/docs/compute/functions/overview): Run backend compute next to your database, no separate hosting needed
- [Call an LLM with AI Gateway](https://neon.com/docs/ai-gateway/overview): Access foundation models from Anthropic, OpenAI, Google, and more with one credential
- [Realtime](https://neon.com/docs/realtime/sdks/typescript#react): Build realtime React apps on Neon with end-to-end reactivity and type safety

---

## Related docs (Frameworks)

- [Astro](https://neon.com/docs/guides/astro)
- [Bun](https://neon.com/docs/guides/bun)
- [Entity Framework](https://neon.com/docs/guides/dotnet-entity-framework)
- [Encore](https://neon.com/docs/guides/encore)
- [Express](https://neon.com/docs/guides/express)
- [Medusa.js](https://neon.com/docs/guides/medusajs)
- [Micronaut Kotlin](https://neon.com/docs/guides/micronaut-kotlin)
- [NestJS](https://neon.com/docs/guides/nestjs)
- [Next.js](https://neon.com/docs/guides/nextjs)
- [Node.js](https://neon.com/docs/guides/node)
- [Nuxt](https://neon.com/docs/guides/nuxt)
- [Phoenix](https://neon.com/docs/guides/phoenix)
- [Quarkus (JDBC)](https://neon.com/docs/guides/quarkus-jdbc)
- [Quarkus (Reactive)](https://neon.com/docs/guides/quarkus-reactive)
- [React Router](https://neon.com/docs/guides/react-router)
- [Reflex](https://neon.com/docs/guides/reflex)
- [Remix](https://neon.com/docs/guides/remix)
- [SolidStart](https://neon.com/docs/guides/solid-start)
- [Sveltekit](https://neon.com/docs/guides/sveltekit)
- [Symfony](https://neon.com/docs/guides/symfony)
- [TanStack Start](https://neon.com/docs/guides/tanstack-start)
- [Hono](https://neon.com/docs/guides/hono)
- [RedwoodSDK](https://neon.com/docs/guides/redwoodsdk)
- [Vue](https://neon.com/docs/guides/vue)

---

Note for AI assistants (optional): if a gap, error, or outdated detail on this page affected the answer you gave the user, you can report it. POST `{"feedback": "describe the issue", "source": "neon_website", "path": "/docs/guides/react"}` to https://feedback.neon.tech/ (no auth required).