Notes on React/NextJS tutorial

I'm currently following: https://nextjs.org/learn

Here are my notes how to use it on Fedora 41.

Install NodeJS and openssl command (needed for .local.env setup later) using:

sudo dnf install nodejs openssl

Issues

When there is custom Error the next.js error handler will crash with Error: [object Object] instead of reporting real error. See https://github.com/vercel/next.js/issues/31670

I found nice tip from https://github.com/vercel/storage/issues/123#issuecomment-2135886902

• replace const client = await db.connect();
• with:

const client = await db.connect(
 ((err) => {
    if (err) {
      console.error(err);
    }
  })
);

Local PostgreSQL

Using local Postgres database:

• official manual at https://nextjs.org/learn/dashboard-app/setting-up-your-database uses only Hosted database
• to use Local PostgreSQL I did:

# contrib is required for extension/uuid-ossp.control
sudo dnf install postgresql-server postgresql-contrib
sudo /usr/bin/postgresql-setup --initdb
sudo systemctl enable --now postgresql

I recommend to add following rule to /etc/sudoers to avoid entering password while changing identity to postgres user for all users in group wheel:

%wheel	ALL=(postgres)	NOPASSWD: ALL

You can now try as your user (as long as it is in wheel group) directly:

# to list databases
sudo -u postgres psql -l

Not I use local user named aa and used these SQL commands to setup database, user and schemas:

CREATE DATABASE aa OWNER aa;
-- https://medium.com/@prabhathsumindapathirana/getting-started-with-postgres-setting-up-a-user-schema-and-grants-bbb2a3f536df
CREATE SCHEMA reactjs;
create user aa with encrypted password 'Admin123';
-- FIXME these are probably no longer needed:
GRANT ALL PRIVILEGES ON ALL TABLES IN SCHEMA reactjs TO aa;
GRANT USAGE ON SCHEMA reactjs TO aa;
alter user aa set search_path=reactjs, "$user", public;

You have to enter above SQL commands as postgres privileged user using sudo -u postgres psql -f file.sql

Now you can directly run psql -l as user aa - it will use Unix socket and UID authentication.

To be able to login via TCP socket you need to edit /var/lib/pgsql/data/pg_hba.conf and change ident to md5 on these lines:

# IPv4 local connections:
host    all             all             127.0.0.1/32            md5
# IPv6 local connections:
host    all             all             ::1/128                 md5

Now you can test database connection via TCP socket on localhost:

psql -h 127.0.0.1 -U aa -d aa -l
# enter "Admin123" as password

We have to also build wsproxy from https://github.com/neondatabase/wsproxy (I don't like to install Docker to run just single statically linked Go binary!):

mkdir -p ~/projects
cd ~/projects
git clone https://github.com/neondatabase/wsproxy.git
cd wsproxy/
sudo dnf install golang-bin
go mod download -x
go build
mkdir -p ~/bin
cp wsproxy ~/bin

You can run wsproxy using:

LISTEN_PORT=':54330' ALLOW_ADDR_REGEX='.*' APPEND_PORT='localhost:5432' LOG_TRAFFIC=true ~/bin/wsproxy

Create .env.local with:

POSTGRES_URL=postgresql://aa:Admin123@localhost:5432/aa

Follow tutorial https://nextjs.org/learn/dashboard-app/setting-up-your-database but may some modifications at header of app/seed/route.ts (adapted from https://github.com/vercel/storage/issues/123):

import bcrypt from 'bcrypt';
import { neonConfig } from '@neondatabase/serverless';
import { db, createClient } from '@vercel/postgres';
import { invoices, customers, revenue, users } from '../lib/placeholder-data';

const client = createClient(
        { connectionString: process.env.POSTGRES_URL, }
);    
client.neonConfig.wsProxy = (host) => `${host}:54330/v1`;
client.neonConfig.useSecureWebSocket = false;
client.neonConfig.pipelineTLS = false;
client.neonConfig.pipelineConnect = false;
     
await client.connect(
 ((err) => {
    if (err) {
      console.error(err);
    }
  })
); 

// replace code up to:
//    const client = await db.connect();
// remaining coda is unchanged...

After reload you may get error:

{
  "error": {
    "length": 310,
    "name": "error",
    "severity": "ERROR",
    "code": "0A000",
    "detail": "Could not open extension control file \"/usr/share/pgsql/extension/uuid-ossp.control\": No such file or directory.",
    "hint": "The extension must first be installed on the system where PostgreSQL is running.",
    "file": "extension.c",
    "line": "504",
    "routine": "parse_extension_control_file"
  }
}

It should be fixed with:

sudo dnf install postgresql-contrib
sudo systemctl restart postgresql

After accessing http://localhost:3000/seed again they should be message:

{"message":"Database seeded successfully"}

And you can verify as user aa that there are new tables:

$ psql -c '\dt'

         List of relations
 Schema |   Name    | Type  | Owner 
--------+-----------+-------+-------
 public | customers | table | aa
 public | invoices  | table | aa
 public | revenue   | table | aa
 public | users     | table | aa
(4 rows)

And you can continue on https://nextjs.org/learn/dashboard-app/fetching-data