In the last few posts I knocked out a slew of initial work. Much of it was just to get things up and running and make sure the database was live, the site was live, and that there was a good connection between the two. I did this by building the first basic login page with a dashboard that just shows that the user is logged in, along with a few pages to display general static content. That can be found in:

1. Building “Adron’s Core Platform”: Starting a React App on Vercel
2. Getting a Vercel PostgreSQL Database and Basic Authentication Operational
3. The Confederacy of Errors Starting With Next Auth; Error, Error, npm ERR!

The tasks I’ll accomplish in the following post:

1. I want a horizontal menu across the top that will link to the dashboard, login, and about page.
2. I want an account creation page.
3. I want to make sure that I set things up for the post-login action to be a redirect to the dashboard page.

Adding a Horizontal Menu

For this menu I’m going to add a div with links, assign it as a flex space (css), and add the pertinent links. The changed ./src/app/components/Navigation.tsx with changes looks like this now.

In the interim while I was getting to the next stage of this app, I ran into (what was I doing? 🤷🏼‍♂️) this error.

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: next-auth@4.24.10
npm ERR! Found: react@19.0.0-rc-66855b96-20241106
npm ERR! node_modules/react
npm ERR!   react@"19.0.0-rc-66855b96-20241106" from the root project
npm ERR!   peer react@"^18.2.0 || 19.0.0-rc-66855b96-20241106" from next@15.0.3
npm ERR!   node_modules/next
npm ERR!     next@"15.0.3" from the root project
npm ERR!     peer next@"^12.2.5 || ^13 || ^14 || ^15" from next-auth@4.24.10
npm ERR!     node_modules/next-auth
npm ERR!       next-auth@"^4.24.10" from the root project
npm ERR!   2 more (react-dom, styled-jsx)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^17.0.2 || ^18" from next-auth@4.24.10
npm ERR! node_modules/next-auth
npm ERR!   next-auth@"^4.24.10" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: react@18.3.1
npm ERR! node_modules/react
npm ERR!   peer react@"^17.0.2 || ^18" from next-auth@4.24.10
npm ERR!   node_modules/next-auth
npm ERR!     next-auth@"^4.24.10" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

As with these dependency issue errors I was getting, which seems to be somewhat common with React these days (or maybe just most of web development!), I went about fixing it with the following steps.

First I removed the existing next-auth installation.

npm uninstall next-auth

Next I installed the beta version of next auth that supports Next.js 15 and React 19 (yes, I RTFMed (i.e. Read The Fucking Manual) a bit and read some other things to finally get to that conclusion).

Quick links to all posts in the series and related at end of this post.

In the last post I’ve detailed getting started with setup of a basic React App using Next.js and deploying it to Vercel using their respective command line tooling. That post is Building “Adron’s Core Platform”: Starting a React App on Vercel.

Database Time – Getting a PostgreSQL Database

First, I setup the database in Vercel. Navigate to Storage.

Next I clicked on “Create” next to the Neon option.

The next prompt form will appear. I went with PostgreSQL (Neon) database, as shown, then the closest region (mine is Portland).