Next.js Discord

Discord Forum

Neondb & Postgresql could not fetch.

Unanswered
Mark posted this in #help-forum
Open in Discord
MarkOP
Hello.
I have a issue with a small ish project where each time it attempts to connect to a postgresql database it gives me an error of "could not fetch" i am aware that is serverless but i want to locally develop this application.

How could i allow the app to connect to my local db without said error?

 ✓ Compiled in 256ms (887 modules)
postgres://postgres:POSTGRES@localhost:5432/postgres?schema=public
 ⨯ node_modules/.pnpm/@neondatabase+serverless@0.6.0/node_modules/@neondatabase/serverless/index.js (1533:42) @ execute
 ⨯ NeonDbError: Error connecting to database: fetch failed
    at async IndexPage (./app/page.tsx:19:20)
null


I have pasted the code for the page and the .env down below.

4 Replies

MarkOP
.env.local
POSTGRES_USER=postgres
POSTGRES_PASSWORD=POSTGRES
POSTGRES_HOST=localhost
POSTGRES_PORT=5432
POSTGRES_DATABASE=postgres
POSTGRES_SCHEMA=public
POSTGRES_URL="postgres://${POSTGRES_USER}:${POSTGRES_PASSWORD}@${POSTGRES_HOST}:${POSTGRES_PORT}/${POSTGRES_DATABASE}?schema=${POSTGRES_SCHEMA}"

NEXTAUTH_URL=http://localhost:3000
AUTH_SECRET=7af48453b72dee6caddcaf080817701ef4ccf7b099caf4f859951b66607551ac

OAUTH_CLIENT_KEY=a758d36b0947e6b3a0e0
OAUTH_CLIENT_SECRET=cede373e55e920fc63af89b7ed60421af40bb41e

import { sql } from '@vercel/postgres';
import { Card, Title, Text } from '@tremor/react';
import Search from './search';
import UsersTable from './table';

interface User {
  id: number;
  name: string;
  username: string;
  email: string;
}

export default async function IndexPage({
  searchParams
}: {
  searchParams: { q: string };
}) {
  console.log(process.env.POSTGRES_URL);
  const search = searchParams.q ?? '';
  const result = await sql`
    SELECT id, name, username, email 
    FROM users 
    WHERE name ILIKE ${'%' + search + '%'};
  `;
  const users = result.rows as User[];

  return (
    <main className="p-4 md:p-10 mx-auto max-w-7xl">
      <Title>Users</Title>
      <Text>A list of users retrieved from a Postgres database.</Text>
      <Search />
      <Card className="mt-6">
        <UsersTable users={users} />
      </Card>
    </main>
  );
}
Here is the package.json
{
  "private": true,
  "license": "MIT",
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@headlessui/react": "^1.7.17",
    "@heroicons/react": "^2.0.18",
    "@neondatabase/serverless": "^0.7.2",
    "@tremor/react": "^3.10.0",
    "@types/js-cookie": "^3.0.5",
    "@types/node": "20.8.9",
    "@types/react": "18.2.33",
    "@types/react-dom": "18.2.14",
    "@vercel/analytics": "^1.1.1",
    "@vercel/postgres": "^0.5.0",
    "autoprefixer": "^10.4.16",
    "drizzle-orm": "^0.29.3",
    "eslint": "8.52.0",
    "eslint-config-next": "14.0.0",
    "js-cookie": "^3.0.5",
    "next": "14.0.0",
    "next-auth": "5.0.0-beta.3",
    "postcss": "^8.4.31",
    "prettier": "^3.0.3",
    "prop-types": "^15.8.1",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "server-only": "^0.0.1",
    "tailwindcss": "^3.3.5",
    "typescript": "5.2.2"
  },
  "prettier": {
    "arrowParens": "always",
    "singleQuote": true,
    "tabWidth": 2,
    "trailingComma": "none"
  },
  "devDependencies": {
    "drizzle-kit": "^0.20.13"
  }
}
MarkOP
Alright, thanks i'll look into it.