chore: upgrade to next 15 and add docs

README.md

@@ -2,35 +2,15 @@ This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next
 
 ## Getting Started
 
-First, run the development server:
+1. Create a new [Postgres db on Vercel](https://vercel.com/docs/storage/vercel-postgres)
+2. Copy the config and paste it into an `.env.local` file
+3. Generate a secret using `openssl rand -base64 32` and paste it in your `.env.local` as `SECRET=<YOUR_SECRET_HERE>`
+4. Install dependencies
 
 ```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
+  pnpm i
+```
+5. Start the dev server and visit `localhost:3000`
+```bash
+  pnpm dev
 ```
-
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
-
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
-
-This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
-
-## Learn More
-
-To learn more about Next.js, take a look at the following resources:
-
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
-
-## Deploy on Vercel
-
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
-
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

app/(public)/login/form.tsx

@@ -1,14 +1,16 @@
 'use client';
 
+import { useActionState } from "react";
+
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { login } from '@/app/auth/01-auth';
 import Link from 'next/link';
-import { useFormState, useFormStatus } from 'react-dom';
+import { useFormStatus } from 'react-dom';
 
 export function LoginForm() {
-  const [state, action] = useFormState(login, undefined);
+  const [state, action] = useActionState(login, undefined);
 
   return (
     <form action={action}>
@@ -40,18 +42,18 @@ export function LoginForm() {
         {state?.message && (
           <p className="text-sm text-red-500">{state.message}</p>
         )}
-        <LoginButton />
+        <LoginButton title="Sign in" />
       </div>
     </form>
   );
 }
 
-export function LoginButton() {
+export function LoginButton({title = 'Sign up'}: {title?: string}) {
   const { pending } = useFormStatus();
 
   return (
     <Button aria-disabled={pending} type="submit" className="mt-4 w-full">
-      {pending ? 'Submitting...' : 'Sign up'}
+      {pending ? 'Submitting...' : title}
     </Button>
   );
 }

app/(public)/signup/form.tsx

@@ -1,13 +1,15 @@
 'use client';
 
+import { useActionState } from "react";
+
 import { Label } from '@/components/ui/label';
 import { Input } from '@/components/ui/input';
 import { Button } from '@/components/ui/button';
 import { signup } from '@/app/auth/01-auth';
-import { useFormState, useFormStatus } from 'react-dom';
+import { useFormStatus } from 'react-dom';
 
 export function SignupForm() {
-  const [state, action] = useFormState(signup, undefined);
+  const [state, action] = useActionState(signup, undefined);
 
   return (
     <form action={action}>

app/auth/02-database-session.ts

@@ -48,7 +48,7 @@ export async function createSession(id: number) {
   const session = await encrypt({ userId: id, expiresAt });
 
   // 3. Store the session in cookies for optimistic auth checks
-  cookies().set('session', session, {
+  (await cookies()).set('session', session, {
     httpOnly: true,
     secure: true,
     expires: expiresAt,

app/auth/02-stateless-session.ts

@@ -2,7 +2,7 @@ import 'server-only';
 
 import type { SessionPayload } from '@/app/auth/definitions';
 import { SignJWT, jwtVerify } from 'jose';
-import { cookies } from 'next/headers';
+import { cookies, type UnsafeUnwrappedCookies } from 'next/headers';
 import { redirect } from 'next/navigation';
 
 const secretKey = process.env.SECRET;
@@ -30,10 +30,11 @@ export async function decrypt(session: string | undefined = '') {
 export async function createSession(userId: string) {
   const expiresAt = new Date(Date.now() + 60 * 60 * 1000);
   const session = await encrypt({ userId, expiresAt });
-
-  cookies().set('session', session, {
+  const cookieStore = await cookies()
+
+  cookieStore.set('session', session, {
     httpOnly: true,
-    secure: true,
+    secure: process.env.NODE_ENV === 'production',
     expires: expiresAt,
     sameSite: 'lax',
     path: '/',
@@ -43,7 +44,7 @@ export async function createSession(userId: string) {
 }
 
 export async function verifySession() {
-  const cookie = cookies().get('session')?.value;
+  const cookie = (await cookies()).get('session')?.value;
   const session = await decrypt(cookie);
 
   if (!session?.userId) {
@@ -54,24 +55,26 @@ export async function verifySession() {
 }
 
 export async function updateSession() {
-  const session = cookies().get('session')?.value;
+  const session = (await cookies()).get('session')?.value;
   const payload = await decrypt(session);
 
   if (!session || !payload) {
     return null;
   }
 
   const expires = new Date(Date.now() + 7 * 24 * 60 * 60 * 1000);
-  cookies().set('session', session, {
+  const cookieStore = await cookies()
+
+  cookieStore.set('session', session, {
     httpOnly: true,
-    secure: true,
+    secure: process.env.NODE_ENV === 'production',
     expires: expires,
     sameSite: 'lax',
     path: '/',
   });
 }
 
 export function deleteSession() {
-  cookies().delete('session');
+  (cookies() as unknown as UnsafeUnwrappedCookies).delete('session');
   redirect('/login');
 }

drizzle/schema.ts

@@ -5,7 +5,6 @@ import {
   uniqueIndex,
   integer,
   timestamp,
-  time,
 } from 'drizzle-orm/pg-core';
 import { InferInsertModel } from 'drizzle-orm';
 

middleware.ts

@@ -13,7 +13,8 @@ export default async function middleware(req: NextRequest) {
   const isPublicRoute = publicRoutes.includes(path);
 
   // 3. Decrypt the session from the cookie
-  const cookie = cookies().get('session')?.value;
+  const cookieStore = await cookies();
+  const cookie = cookieStore.get('session')?.value;
   const session = await decrypt(cookie);
 
   // 4. Redirect

package.json

@@ -4,15 +4,15 @@
   "private": true,
   "scripts": {
     "build": "next build",
-    "dev": "next dev",
+    "dev": "next dev --turbopack",
     "lint": "next lint",
     "prettier": "prettier --write --ignore-unknown .",
     "push": "drizzle-kit push:pg",
-    "seed": "npx tsx be/seed.ts",
+    "seed": "npx tsx ./drizzle/seed.ts",
     "start": "next start"
   },
   "dependencies": {
-    "@next/env": "^14.1.3",
+    "@next/env": "15.1.3",
     "@nivo/bar": "^0.85.1",
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-icons": "^1.3.0",
@@ -26,10 +26,10 @@
     "jose": "^5.2.3",
     "jsonwebtoken": "^9.0.2",
     "lucide-react": "^0.356.0",
-    "next": "14.2.0-canary.41",
+    "next": "15.1.3",
     "prettier-plugin-tailwindcss": "^0.5.12",
-    "react": "^18",
-    "react-dom": "^18",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
     "server-only": "^0.0.1",
     "tailwind-merge": "^2.2.1",
     "tailwindcss-animate": "^1.0.7",
@@ -39,16 +39,22 @@
     "@types/bcrypt": "^5.0.2",
     "@types/jsonwebtoken": "^9.0.6",
     "@types/node": "^20",
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
+    "@types/react": "19.0.3",
+    "@types/react-dom": "19.0.2",
     "@vercel/style-guide": "^6.0.0",
     "autoprefixer": "^10.0.1",
     "drizzle-kit": "^0.20.14",
     "eslint": "^8",
-    "eslint-config-next": "14.1.3",
+    "eslint-config-next": "15.1.3",
     "postcss": "^8",
     "prettier": "^3.2.5",
     "tailwindcss": "^3.3.0",
     "typescript": "^5"
+  },
+  "pnpm": {
+    "overrides": {
+      "@types/react": "19.0.3",
+      "@types/react-dom": "19.0.2"
+    }
   }
 }