# Connect a React application to Neon

React by Facebook is an open-source front-end JavaScript library for building user interfaces based on components.

Lakebase Postgres should be accessed from the server side in React applications. Using the following React meta-frameworks, you can easily configure a server-side connection to a Lakebase Postgres database.

## React Meta-Frameworks

Find detailed instructions for connecting to Neon from various React meta-frameworks.

::::card-grid
:::card{title="TanStack Start" href="/guides/postgres-guides-tanstack-start"}
<img src="/current/media/t/75c5dc71-055f-4496-bcaf-6966eeb0b645/p/af70e81f-ccf2-4beb-9df8-efafa018b2a1/d11fbeba8f79660ab13d40b4fc983ce3569e89b7b2983d6c4823fd0c5c3ecd97.png/raw" alt="tanstack logo"><img src="/current/media/t/75c5dc71-055f-4496-bcaf-6966eeb0b645/p/af70e81f-ccf2-4beb-9df8-efafa018b2a1/8afcb47996234a599df237d5d07fb6297d11289b70e8ba3c64d4a6d3529ee37e.png/raw" alt="tanstack logo">

Connect a TanStack Start application to Neon
:::

:::card{title="Next.js" href="/guides/neon-docs-guides-nextjs"}
<img src="/current/media/t/75c5dc71-055f-4496-bcaf-6966eeb0b645/p/af70e81f-ccf2-4beb-9df8-efafa018b2a1/3d628068fd80b71f62c0a192bb751d414f8c964338d367d5f0953d884f75677e.png/raw" alt="next-js logo"><img src="/current/media/t/75c5dc71-055f-4496-bcaf-6966eeb0b645/p/af70e81f-ccf2-4beb-9df8-efafa018b2a1/36428a2ab8c0557739e92456b73d3af76b530579089ca97305abbf41dce7a92f.png/raw" alt="next-js logo">

Connect a Next.js application to Neon
:::

:::card{title="Remix" href="/guides/neon-docs-guides-remix"}
<img src="/current/media/t/75c5dc71-055f-4496-bcaf-6966eeb0b645/p/af70e81f-ccf2-4beb-9df8-efafa018b2a1/3687b674214ff06be0ab5fd12e26fb3cb56e666c50b02d8f47025683a76071c8.png/raw" alt="remix logo"><img src="/current/media/t/75c5dc71-055f-4496-bcaf-6966eeb0b645/p/af70e81f-ccf2-4beb-9df8-efafa018b2a1/23da62e5dac96ffe3a7f295f17e86d5935c1472b4a7ca362d71edf5158558818.png/raw" alt="remix logo">

Connect a Remix application to Neon
:::

:::card{title="Sveltekit" href="/guides/neon-docs-guides-sveltekit"}
<img src="/current/media/t/75c5dc71-055f-4496-bcaf-6966eeb0b645/p/af70e81f-ccf2-4beb-9df8-efafa018b2a1/b523bd7dcaf921e1e9c637cda09722221ea8291586d5638e01e695d1ab21645b.png/raw" alt="svelte logo">

Connect a Sveltekit application to Neon
:::
::::

## Managed Better Auth

After you connect your database, add managed authentication with [Managed Better Auth](/guides/auth-index). Quick starts are available for supported React meta-frameworks:

::::card-grid
:::card{title="Next.js" href="/guides/auth-quick-start-nextjs-api-only"}
<img src="/current/media/t/75c5dc71-055f-4496-bcaf-6966eeb0b645/p/af70e81f-ccf2-4beb-9df8-efafa018b2a1/3d628068fd80b71f62c0a192bb751d414f8c964338d367d5f0953d884f75677e.png/raw" alt="next-js logo"><img src="/current/media/t/75c5dc71-055f-4496-bcaf-6966eeb0b645/p/af70e81f-ccf2-4beb-9df8-efafa018b2a1/36428a2ab8c0557739e92456b73d3af76b530579089ca97305abbf41dce7a92f.png/raw" alt="next-js logo">

Set up Managed Better Auth with Next.js
:::

:::card{title="TanStack Router" href="/guides/auth-quick-start-tanstack-router"}
<img src="/current/media/t/75c5dc71-055f-4496-bcaf-6966eeb0b645/p/af70e81f-ccf2-4beb-9df8-efafa018b2a1/d11fbeba8f79660ab13d40b4fc983ce3569e89b7b2983d6c4823fd0c5c3ecd97.png/raw" alt="tanstack logo"><img src="/current/media/t/75c5dc71-055f-4496-bcaf-6966eeb0b645/p/af70e81f-ccf2-4beb-9df8-efafa018b2a1/8afcb47996234a599df237d5d07fb6297d11289b70e8ba3c64d4a6d3529ee37e.png/raw" alt="tanstack logo">

Set up Managed Better Auth with TanStack Router
:::
::::

For React Router, follow the [React Auth quick start](/guides/auth-quick-start-react).

## Next steps

- [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

## Need help?

Join our [Discord Server](https://neon.com/discord) to ask questions or see what others are doing with Neon. For paid plan support options, see [Support](/guides/postgres-introduction-support).

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