Upgrade to Next.js 16, React 19, and modernize dependencies

.github/workflows/e2e-tests.yml

@@ -27,7 +27,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: "lts/*"
+          node-version-file: '.nvmrc'
           cache: "npm"
 
       - name: Install dependencies
@@ -55,7 +55,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: "lts/*"
+          node-version-file: '.nvmrc'
           cache: "npm"
 
       - name: Cache Playwright browsers

.github/workflows/pull-request.yml

@@ -19,7 +19,7 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: 'lts/*'
+          node-version-file: '.nvmrc'
           cache: 'npm'
 
       - name: Install dependencies

.gitignore

@@ -68,3 +68,6 @@ ssmSetup.zsh
 
 # open-next
 .open-next
+
+# Snyk Security Extension - AI Rules (auto-generated)
+.github/instructions/snyk_rules.instructions.md

.mcp.json

@@ -0,0 +1,27 @@
+{
+  "mcpServers": {
+    "context7": {
+      "command": "npx",
+      "args": ["-y", "@upstash/context7-mcp"],
+      "env": {
+        "CONTEXT7_API_KEY": "ctx7sk-1d829fe1-62b2-4697-b7f4-673ae5047efd"
+      }
+    },
+    "puppeteer": {
+      "command": "npx",
+      "args": ["-y", "puppeteer-mcp-server"],
+      "env": {}
+    },
+    "next-devtools": {
+      "command": "npx",
+      "args": ["-y", "next-devtools-mcp@latest"]
+    },
+    "sequential-thinking": {
+      "command": "npx",
+      "args": ["-y", "@modelcontextprotocol/server-sequential-thinking"]
+    },
+    "Sentry": {
+      "url": "https://mcp.sentry.dev/mcp/assemble-pro/javascript-nextjs"
+    }
+  }
+}

.nvmrc

@@ -1 +1 @@
-v20.17.0
+v24

app/(app)/[username]/page.tsx

@@ -5,9 +5,10 @@ import { getServerAuthSession } from "@/server/auth";
 import { type Metadata } from "next";
 import { db } from "@/server/db";
 
-type Props = { params: { username: string } };
+type Props = { params: Promise<{ username: string }> };
 
-export async function generateMetadata({ params }: Props): Promise<Metadata> {
+export async function generateMetadata(props: Props): Promise<Metadata> {
+  const params = await props.params;
   const username = params.username;
 
   const profile = await db.query.user.findFirst({
@@ -52,11 +53,12 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
   };
 }
 
-export default async function Page({
-  params,
-}: {
-  params: { username: string };
-}) {
+export default async function Page(
+  props: {
+    params: Promise<{ username: string }>;
+  }
+) {
+  const params = await props.params;
   const username = params?.username;
 
   if (!username) {

app/(app)/alpha/additional-details/_actions.ts

@@ -37,9 +37,9 @@
     return true;
   } catch (error) {
     if (error instanceof z.ZodError) {
-      console.error("Validation error:", error.errors);
+      console.error("Validation error:", error.issues);
     } else {
       console.error("Error updating the User model:", error);
     }
     return false;
   }
@@ -65,9 +65,9 @@
     return true;
   } catch (error) {
     if (error instanceof z.ZodError) {
-      console.error("Validation error:", error.errors);
+      console.error("Validation error:", error.issues);
     } else {
       console.error("Error updating the User model:", error);
     }
     return false;
   }
@@ -97,9 +97,9 @@
     return true;
   } catch (error) {
     if (error instanceof z.ZodError) {
-      console.error("Validation error:", error.errors);
+      console.error("Validation error:", error.issues);
     } else {
       console.error("Error updating the User model:", error);
     }
     return false;
   }

app/(app)/alpha/additional-details/_client.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import { redirect, useRouter, useSearchParams } from "next/navigation";
 import { useSession } from "next-auth/react";
 import {
@@ -120,7 +120,7 @@
       } else {
         toast.error("Error, saving was unsuccessful.");
       }
     } catch (error) {
       toast.error("An unexpected error occurred.");
     }
   };
@@ -228,23 +228,21 @@
     parsedDateOfBirth?.getDate(),
   );
 
-  const [listOfDaysInSelectedMonth, setListOfDaysInSelectedMonth] = useState([
-    0,
-  ]);
-
-  useEffect(() => {
-    // If year or month change, recalculate how many days are in the specified month
+  // Compute days in month directly from year/month (no state needed)
+  const listOfDaysInSelectedMonth = useMemo(() => {
     if (year && month !== undefined) {
       // Returns the last day of the month, by creating a date with day 0 of the following month.
-      const nummberOfDaysInMonth = new Date(year, month + 1, 0).getDate();
-      const daysArray = Array.from(
-        { length: nummberOfDaysInMonth },
+      const numberOfDaysInMonth = new Date(year, month + 1, 0).getDate();
+      return Array.from(
+        { length: numberOfDaysInMonth },
         (_, index) => index + 1,
       );
-      setListOfDaysInSelectedMonth(daysArray);
     }
+    return [0];
+  }, [year, month]);
 
-    // Update the date object when year, month or date change
+  // Update the date object when year, month or day change
+  useEffect(() => {
     if (year && month !== undefined && day) {
       let selectedDate: Date;
 
@@ -257,7 +255,7 @@
       }
       setValue("dateOfBirth", selectedDate.toISOString());
     }
-  }, [year, month, day]);
+  }, [year, month, day, setValue]);
 
   const startYearAgeDropdown = 1950;
   const endYearAgeDropdown = 2010;
@@ -276,7 +274,7 @@
       } else {
         toast.error("Error, saving was unsuccessful.");
       }
     } catch (error) {
       toast.error("An unexpected error occurred.");
     }
   };

app/(app)/alpha/layout.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { notFound } from "next/navigation";
 
 export const metadata = {
@@ -8,7 +9,7 @@ export const metadata = {
   },
 };
 
-export default function Alpha({ children }: { children: ChildNode }) {
+export default function Alpha({ children }: { children: React.ReactNode }) {
   if (process.env.ALPHA || process.env.NODE_ENV === "development") {
     return <>{children}</>;
   }

app/(app)/alpha/new/[[...postIdArr]]/_client.tsx

@@ -47,7 +47,8 @@ const Create = () => {
 
   useEffect(() => {
     _setUnsaved(hasUnsavedChanges);
-  }, [hasUnsavedChanges, _setUnsaved]);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [hasUnsavedChanges]);
 
   return (
     <>
@@ -197,7 +198,7 @@ const Create = () => {
             </div>
           </div>
         </Transition>
-        {dataStatus === "loading" && postId && (
+        {dataStatus === "pending" && postId && (
           <div className="bg-gray fixed left-0 top-0 z-40 flex h-screen w-screen items-center justify-center">
             <div className="z-50 flex flex-col items-center border-2 border-black bg-white px-5 py-2 opacity-100">
               <div className="loader-dots relative mt-2 block h-5 w-20">
@@ -236,7 +237,7 @@ const Create = () => {
 
             <div className="flex items-center justify-between">
               <div>
-                {saveStatus === "loading" && (
+                {saveStatus === "pending" && (
                   <p className="text-xs lg:text-sm">Auto-saving...</p>
                 )}
                 {saveStatus === "error" && savedTime && (

app/(app)/articles/[slug]/page.tsx

@@ -20,9 +20,10 @@ import DOMPurify from "isomorphic-dompurify";
 import type { JSONContent } from "@tiptap/core";
 import NotFound from "@/components/NotFound/NotFound";
 
-type Props = { params: { slug: string } };
+type Props = { params: Promise<{ slug: string }> };
 
-export async function generateMetadata({ params }: Props): Promise<Metadata> {
+export async function generateMetadata(props: Props): Promise<Metadata> {
+  const params = await props.params;
   const slug = params.slug;
 
   const post = await getPost({ slug });
@@ -32,7 +33,7 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
   const tags = post?.tags.map((tag) => tag.tag.title);
 
   if (!post) return {};
-  const host = headers().get("host") || "";
+  const host = (await headers()).get("host") || "";
   return {
     title: `${post.title} | by ${post.user.name} | Codú`,
     authors: {
@@ -77,11 +78,12 @@ const renderSanitizedTiptapContent = (jsonContent: JSONContent) => {
   return DOMPurify.sanitize(rawHtml);
 };
 
-const ArticlePage = async ({ params }: Props) => {
+const ArticlePage = async (props: Props) => {
+  const params = await props.params;
   const session = await getServerAuthSession();
   const { slug } = params;
 
-  const host = headers().get("host") || "";
+  const host = (await headers()).get("host") || "";
 
   const post = await getPost({ slug });
 

app/(app)/articles/_client.tsx

@@ -104,7 +104,7 @@ const ArticlesPage = () => {
                   Something went wrong... Please refresh your page.
                 </div>
               )}
-              {status === "loading" &&
+              {status === "pending" &&
                 Children.toArray(
                   Array.from({ length: 7 }, () => {
                     return <ArticleLoading />;
@@ -164,7 +164,7 @@ const ArticlesPage = () => {
               Popular topics
             </h3>
             <div className="flex flex-wrap gap-2">
-              {tagsStatus === "loading" && <PopularTagsLoading />}
+              {tagsStatus === "pending" && <PopularTagsLoading />}
               {tagsStatus === "success" &&
                 tagsData.data.map(({ title }) => (
                   <Link

app/(app)/auth/page.tsx

@@ -5,20 +5,24 @@ import Link from "next/link";
 import Image from "next/image";
 import { useTheme } from "next-themes";
 import { THEME_MODES } from "@/components/Theme/ThemeToggle/ThemeToggle";
-import { useEffect, useState } from "react";
+import { useSyncExternalStore } from "react";
+
+// Subscribe to nothing - this is just to detect client-side rendering
+const emptySubscribe = () => () => {};
+const getClientSnapshot = () => true;
+const getServerSnapshot = () => false;
 
 export const PostAuthPage = (content: {
   heading: string;
   subHeading: string;
 }) => {
-  const [mounted, setMounted] = useState(false);
+  const mounted = useSyncExternalStore(
+    emptySubscribe,
+    getClientSnapshot,
+    getServerSnapshot,
+  );
   const { resolvedTheme } = useTheme();
 
-  // useEffect only happens on client not server
-  useEffect(() => {
-    setMounted(true);
-  }, []);
-
   // if on server dont render. needed to prevent a hydration mismatch error
   if (!mounted) return null;
 

app/(app)/company/[slug]/page.tsx

@@ -1,4 +1,5 @@
 import { notFound } from "next/navigation";
+import Link from "next/link";
 import { companies } from "./config";
 
 export const metadata = {
@@ -7,9 +8,10 @@ export const metadata = {
     "Explore our community sponsors. Ninedots Recruitment connects top talent with leading companies in the tech industry.",
 };
 
-type Props = { params: { slug: string } };
+type Props = { params: Promise<{ slug: string }> };
 
-export default async function Page({ params }: Props) {
+export default async function Page(props: Props) {
+  const params = await props.params;
   const { slug } = params;
 
   const company = companies.find((item) => item.slug === slug.toLowerCase());
@@ -63,12 +65,12 @@ export default async function Page({ params }: Props) {
           </div>
         </div>
         <div className="border-neutral-200 bg-neutral-100 p-4 dark:border-neutral-700 dark:bg-neutral-800">
-          <a
+          <Link
             href="/sponsorship"
             className="text-sm font-medium text-neutral-500 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-300"
           >
             ← Back to all sponsors
-          </a>
+          </Link>
         </div>
       </div>
     </div>

app/(app)/draft/[id]/page.tsx

@@ -11,15 +11,16 @@ import { type Metadata } from "next";
 import { getPostPreview } from "@/server/lib/posts";
 import { getCamelCaseFromLower } from "@/utils/utils";
 
-type Props = { params: { id: string } };
+type Props = { params: Promise<{ id: string }> };
 
-export async function generateMetadata({ params }: Props): Promise<Metadata> {
+export async function generateMetadata(props: Props): Promise<Metadata> {
+  const params = await props.params;
   const { id } = params;
 
   const post = await getPostPreview({ id });
 
   if (!post) return {};
-  const host = headers().get("host") || "";
+  const host = (await headers()).get("host") || "";
   return {
     title: `Draft: ${post.title} | by ${post.user.name} | Codú`,
     authors: {
@@ -34,7 +35,8 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
   };
 }
 
-const PreviewPage = async ({ params }: Props) => {
+const PreviewPage = async (props: Props) => {
+  const params = await props.params;
   const { id } = params;
 
   const post = await getPostPreview({ id });