major upgrade to next 14 (#1834)

.env.example

@@ -1,16 +1,10 @@
 AIRTABLE_API_KEY=
 AIRTABLE_BASE=
 DATABASE_URL=
+DIRECT_URL=
 GH_PUBLIC_TOKEN=
 HCAPTCHA_SECRET_KEY=
 NEXT_PUBLIC_HCAPTCHA_SITE_KEY=
-POSTGRES_DATABASE=
-POSTGRES_HOST=
-POSTGRES_PASSWORD=
-POSTGRES_PRISMA_URL=
-POSTGRES_URL=
-POSTGRES_URL_NON_POOLING=
-POSTGRES_USER=
 SPOTIFY_CLIENT_ID=
 SPOTIFY_CLIENT_SECRET=
 SPOTIFY_REFRESH_TOKEN=

.node-version

@@ -1 +1 @@
-18.18.2
+18.19.0

README.md

@@ -5,7 +5,7 @@
 [![Licensed under CC-BY-4.0](https://img.shields.io/badge/license-CC--BY--4.0-fb7828?logo=creative-commons&logoColor=white)](LICENSE)
 [![GitHub repo size](https://img.shields.io/github/repo-size/jakejarvis/jarv.is?color=009cdf&label=repo%20size&logo=git&logoColor=white)](https://github.com/jakejarvis/jarv.is)
 
-My humble abode on the World Wide Web, created and deployed using [Next.js](https://nextjs.org/), [Stitches](https://stitches.dev/), [Prisma](https://www.prisma.io/), [Vercel](https://vercel.com/), [and more](https://jarv.is/humans.txt).
+My humble abode on the World Wide Web, created and deployed using [Next.js](https://nextjs.org/), [Stitches](https://stitches.dev/), [Prisma](https://www.prisma.io/), [Vercel](https://vercel.com/), [Neon](https://neon.tech/), [and more](https://jarv.is/humans.txt).
 
 I keep an ongoing list of [post ideas](https://github.com/jakejarvis/jarv.is/issues/1) and [coding to-dos](https://github.com/jakejarvis/jarv.is/issues/714) as issues in this repo. Outside contributions, improvements, and/or corrections are welcome too!
 

lib/helpers/prisma.ts

@@ -1,11 +1,20 @@
 import { PrismaClient } from "@prisma/client";
+import { PrismaNeon } from "@prisma/adapter-neon";
+import { Pool, neonConfig } from "@neondatabase/serverless";
+import ws from "ws";
+
+// https://www.prisma.io/blog/serverless-database-drivers-KML1ehXORxZV#use-neon-with-neondatabaseserverless
+neonConfig.webSocketConstructor = ws;
+const connectionString = `${process.env.DATABASE_URL}`;
 
 // creating PrismaClient here prevents next.js from starting too many concurrent prisma instances and exhausting the
 // number of connection pools available (especially when hot reloading from `next dev`).
 // https://www.prisma.io/docs/guides/other/troubleshooting-orm/help-articles/nextjs-prisma-client-dev-practices
 
 const prismaClientSingleton = () => {
-  return new PrismaClient();
+  const pool = new Pool({ connectionString });
+  const adapter = new PrismaNeon(pool);
+  return new PrismaClient({ adapter });
 };
 
 type PrismaClientSingleton = ReturnType<typeof prismaClientSingleton>;

next.config.js

@@ -20,8 +20,8 @@ const nextConfig = {
       process.env.NEXT_PUBLIC_VERCEL_ENV === "production"
         ? `https://${config.siteDomain}`
         : process.env.NEXT_PUBLIC_VERCEL_URL
-        ? `https://${process.env.NEXT_PUBLIC_VERCEL_URL}` // https://vercel.com/docs/concepts/projects/environment-variables#system-environment-variables
+          ? `https://${process.env.NEXT_PUBLIC_VERCEL_URL}` // https://vercel.com/docs/concepts/projects/environment-variables#system-environment-variables
-        : `http://localhost:${process.env.PORT || 3000}`, // https://nextjs.org/docs/api-reference/cli#development
+          : `http://localhost:${process.env.PORT || 3000}`, // https://nextjs.org/docs/api-reference/cli#development
     // freeze timestamp at build time for when server-side pages need a "last updated" date. calling Date.now() from
     // pages using getServerSideProps will return the current(ish) time instead, which is usually not what we want.
     RELEASE_DATE: new Date().toISOString(),

package.json

@@ -19,28 +19,29 @@
   },
   "dependencies": {
     "@giscus/react": "^2.3.0",
-    "@hcaptcha/react-hcaptcha": "^1.8.1",
+    "@hcaptcha/react-hcaptcha": "^1.9.2",
+    "@neondatabase/serverless": "^0.6.0",
     "@novnc/novnc": "1.4.0",
     "@octokit/graphql": "^7.0.2",
-    "@octokit/graphql-schema": "^14.37.0",
+    "@octokit/graphql-schema": "^14.45.0",
-    "@prisma/client": "^5.4.2",
+    "@prisma/adapter-neon": "^5.6.0",
+    "@prisma/client": "^5.6.0",
     "@react-spring/web": "^9.7.3",
     "@stitches/react": "1.3.1-1",
-    "@vercel/edge": "^1.1.0",
+    "@vercel/edge": "^1.1.1",
-    "@vercel/postgres": "^0.5.0",
     "comma-number": "^2.1.0",
     "copy-to-clipboard": "^3.3.3",
     "dayjs": "^1.11.10",
-    "fast-glob": "^3.3.1",
+    "fast-glob": "^3.3.2",
-    "fathom-client": "^3.5.0",
+    "fathom-client": "^3.6.0",
     "feed": "^4.2.2",
     "formik": "^2.4.5",
     "gray-matter": "^4.0.3",
-    "next": "13.5.5",
+    "next": "14.0.3",
     "next-mdx-remote": "^4.4.1",
-    "next-seo": "^6.1.0",
+    "next-seo": "^6.4.0",
     "obj-str": "^1.1.0",
-    "p-map": "^6.0.0",
+    "p-map": "^7.0.0",
     "p-memoize": "^7.1.1",
     "polished": "^4.2.2",
     "prop-types": "^15.8.1",
@@ -49,9 +50,9 @@
     "react-dom": "18.2.0",
     "react-error-boundary": "^4.0.11",
     "react-frame-component": "^5.2.6",
-    "react-icons": "^4.11.0",
+    "react-icons": "^4.12.0",
     "react-innertext": "^1.1.5",
-    "react-intersection-observer": "^9.5.2",
+    "react-intersection-observer": "^9.5.3",
     "react-is": "18.2.0",
     "react-player": "^2.13.0",
     "react-textarea-autosize": "^8.5.3",
@@ -68,35 +69,37 @@
     "sitemap": "^7.1.1",
     "stitches-normalize": "^3.0.1",
     "swr": "^2.2.4",
-    "unified": "^10.1.2"
+    "unified": "^10.1.2",
+    "ws": "^8.14.2"
   },
   "devDependencies": {
     "@jakejarvis/eslint-config": "^3.1.0",
-    "@types/comma-number": "^2.1.0",
+    "@types/comma-number": "^2.1.2",
-    "@types/node": "^18.17.14",
+    "@types/node": "^20.10.3",
-    "@types/novnc__novnc": "^1.3.2",
+    "@types/novnc__novnc": "^1.3.4",
-    "@types/prop-types": "^15.7.8",
+    "@types/prop-types": "^15.7.11",
-    "@types/react": "^18.2.28",
+    "@types/react": "^18.2.42",
-    "@types/react-dom": "^18.2.13",
+    "@types/react-dom": "^18.2.17",
-    "@types/react-is": "^18.2.2",
+    "@types/react-is": "^18.2.4",
-    "@types/uglify-js": "^3.17.2",
+    "@types/uglify-js": "^3.17.4",
-    "@typescript-eslint/eslint-plugin": "^6.8.0",
+    "@types/ws": "^8.5.10",
-    "@typescript-eslint/parser": "^6.8.0",
+    "@typescript-eslint/eslint-plugin": "^6.13.2",
+    "@typescript-eslint/parser": "^6.13.2",
     "cross-env": "^7.0.3",
-    "eslint": "~8.51.0",
+    "eslint": "~8.55.0",
-    "eslint-config-next": "13.5.5",
+    "eslint-config-next": "14.0.3",
-    "eslint-config-prettier": "~9.0.0",
+    "eslint-config-prettier": "~9.1.0",
     "eslint-plugin-mdx": "~2.2.0",
     "eslint-plugin-prettier": "~5.0.1",
-    "lint-staged": "^15.0.1",
+    "lint-staged": "^15.2.0",
-    "prettier": "^3.0.3",
+    "prettier": "^3.1.0",
-    "prisma": "^5.4.2",
+    "prisma": "^5.6.0",
     "simple-git-hooks": "^2.9.0",
-    "typescript": "^5.2.2",
+    "typescript": "^5.3.2",
     "uglify-js": "^3.17.4"
   },
   "optionalDependencies": {
-    "sharp": "^0.32.6"
+    "sharp": "^0.33.0"
   },
   "engines": {
     "node": ">=16.x"
@@ -113,9 +116,9 @@
       "eslint"
     ]
   },
-  "packageManager": "pnpm@8.9.2",
+  "packageManager": "pnpm@8.11.0",
   "volta": {
-    "node": "18.18.2",
+    "node": "18.19.0",
-    "pnpm": "8.9.2"
+    "pnpm": "8.11.0"
   }
 }

pages/privacy.tsx

@@ -48,9 +48,8 @@ const Privacy = () => {
 
         <p>
           A very simple hit counter on each blog post tallies an aggregate number of pageviews (i.e.{" "}
-          <CodeInline>hits = hits + 1</CodeInline>) in a{" "}
+          <CodeInline>hits = hits + 1</CodeInline>) in a <Link href="https://neon.tech/">Neon Postgres</Link> database.
-          <Link href="https://vercel.com/storage/postgres">Vercel Postgres</Link> database. Individual views and
+          Individual views and identifying (or non-identifying) details are <strong>never stored or logged</strong>.
-          identifying (or non-identifying) details are <strong>never stored or logged</strong>.
         </p>
 
         <p>

prisma/schema.prisma

@@ -1,5 +1,6 @@
 generator client {
   provider        = "prisma-client-js"
+  previewFeatures = ["driverAdapters"]
 }
 
 datasource db {

public/humans.txt

@@ -32,6 +32,7 @@
   - Vercel
   - Stitches
   - Prisma
+  - Neon Postgres
   - Giscus
   - Fathom Analytics
   - ...and more: https://jarv.is/uses/