NEXTJS-TS

• NEXTJS
  • REACTJS FE
  • SSR with knex and postgres connections

Packages

• next
• react
• react-dom
• knex
• pg
• clsx
• tailwindcss
• @vis.gl/react-google-maps
• yet-another-react-lightbox

Concepts

• Pulled from various hello world and getting started repos
• This is a Next.js project bootstrapped with create-next-app.
• Replatformed site for rockcairn.com which was previously a php site

Home Page	Peaks Page	Map Page

Getting Started

1. Install the packages: pnpm install
2. Install a postgres database

brew install postgresql
brew services start postgresql
psql -U <username> -w <database>

• for macos if you don't setup a user its just your macos user name without password

psql postgres
> CREATE DATABASE <databasename>;

1. Create a .env and .env.local file based on .env.sample
   • that references your already created postgres database.
   • Also add your google api maps key GOOGLE_MAPS_API_KEY
2. Create Tables and Seed your database with knex
   • pnpm migrate
   • pnpm seed
3. Adjust the package.json scripts:dev tag to match your desired -hostname and -p port
4. Run the development server: pnpm dev
5. Open http://rockcairn.localhost.com:3000 with your browser to see the results
   1. Adjust the url for your hostname and port choices in your package.json file

Learn More

To learn more take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.
• Google Maps Lab - with vis.gl/react-google-maps
• React Google Maps - vis.gl/react-google-maps github repo
• Vercel Next.js Hosting - easy hosting of next.js web applications
• Neon postgres DB - easy cloud postgres db connection to Vercel

Copyright

• All images and page content are Copyright © 1999-2026
• Feel free to lift and shift the framework (nextjs, and knexjs)
• "yet-another-react-lightbox" react/node packages used via MIT licensing.