Educational project to learn how to integrate a database and authentication in Next.

• Create a Prisma ORM schema and connect to the Vercel PostgreSQL Database.
• Add various SQL relations: one-to-one, one-to-many, many-to-many.
• Query the database via Prisma ORM and "populate" relations during querying.
• Integrate a simple pagination mechanism to read the database.

• Create client and server components.
• Handle form submit in Next.js via: useFormState() + useFormStatus() to control the "pending-status" and "response-messages" on the client-side.
• Use Next.js Server Actions for CRUD operations. Read and write data from the database via Prisma ORM on the server-side.
• Validate form data against a Zod schema.

• Authenticate a user via GitHub OAuth procedure.
• Lock certain features based on the session/login status.

• TypeScript
• Next.js
• Next-Auth (OAuth with Auth.js)
• Vercel PostgreSQL Database
• Prisma ORM

1. Create a Auth secret: npx auth secret.

2. Create and register a new OAuth app on GitHub: "New OAuth App"

3. Add to the .env file:

   AUTH_SECRET="auto generated in step 1"
   AUTH_GITHUB_ID="optained in step 2"
   AUTH_GITHUB_SECRET="optained in step 2"

There seem to be issues with yarn PnP and the prisma client. Here is my workaround:

1. Generate the client manually in a specif direction: generator client { output = "./client" }
2. Use yarn pnpfify to generate the prisma client: yarn pnpify prisma generate
3. Use the this client in the project instead of the one installed via package.json: import { PrismaClient } from "../prisma/client";

yarn add @prisma/client
yarn add -D prisma @yarnpkg/pnpify

yarn prisma init --datasource-provider PostgreSQL

credentials can be optained from: vercel.com > login > user dashboard > Storage > your database > ".env.local" tab > Copy Snippet.

touch .env

POSTGRES_PRISMA_URL="postgres://default:xxxxxxxxx.aws.neon.tech:5432/verceldb?xxxxxx"
POSTGRES_URL_NON_POOLING="postgres://default:xxxxxxxxx.aws.neon.tech:5432/verceldb?xxxxxx"

add this line: output = "./client" in the generator client {} object.

generator client {
    provider = "prisma-client-js"
    output   = "./client" // <== this line, here
}

datasource db {
    provider  = "postgresql"
    url       = env("POSTGRES_PRISMA_URL")
    directUrl = env("POSTGRES_URL_NON_POOLING")
}

model ... {
  ....
}

yarn prisma migrate dev --name init --skip-generate
yarn pnpify prisma generate

// root/prisma/db.ts

import { PrismaClient } from './client';

const prisma = new PrismaClient();
export default prisma;

• offical prisma.io/docs

• offical vercel.com/docs

• GitHub issue regarding PnP problems