Connect a React Router application to Neon

React Router is a powerful routing library for React that also includes modern, full-stack framework features. This guide explains how to connect a React Router application to Neon using a server-side loader function.

To create a Neon project and access it from a React Router application:

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

2. Create a React Router project and add dependencies

   1. Create a React Router project using the following command:

      npx create-react-router@latest with-react-router --yes
      cd with-react-router

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

      Neon serverless driver

      postgres.js

      node-postgres

      npm install @neondatabase/serverless

3. Store your Neon credentials

   Add a .env file to your project's root directory and add your Neon connection string to it. You can find the connection string for your database by clicking the Connect button on your Project Dashboard. For more information, see Connect from any application.

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

4. Configure the Postgres client

   With React Router, data fetching is handled in "Route Modules". We will create a new route that connects to Neon in its loader function, which runs on the server.

   1. Define the route

   First, define a new route in app/routes.ts. This tells React Router to render our new component when a user visits the /version path.

   import { type RouteConfig, route, index } from '@react-router/dev/routes';
   
   export default [
     index('./home.tsx'),
     route('version', './routes/version.tsx'),
   ] satisfies RouteConfig;

   2. Create the route module

   Create a new file at app/routes/version.tsx. This file will contain both the server-side data loader and the client-side React component. The loader function will connect to Neon, query the database version, and pass the result to the Component via the loaderData prop.

   Neon serverless driver

   postgres.js

   node-postgres

   import { neon } from '@neondatabase/serverless';
   import type { Route } from './+types/version';
   
   // The loader function runs on the server
   export async function loader() {
     const sql = neon(process.env.DATABASE_URL as string);
     const response = await sql`SELECT version()`;
     return { version: response[0].version };
   }
   
   // The component runs in the browser
   export default function Version({ loaderData }: Route.ComponentProps) {
     return (
       <div>
         <h1>Database Version</h1>
         <p>{loaderData.version}</p>
       </div>
     );
   }

5. Run the app

   Generate types

   Run the following command to generate types for your routes:

   npm run typecheck

   Start the development server

   With the types generated, start the development server:

   npm run dev

   Now, navigate to http://localhost:5173/version in your browser. You should see a page displaying the version of your Neon Postgres database.

   Database Version
   PostgreSQL 17.5 (6bc9ef8) on aarch64-unknown-linux-gnu, compiled by gcc (Debian 12.2.0-14+deb12u1) 12.2.0, 64-bit

Source code

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

• Get started with React Router and Neon

  Get started with React Router and Neon