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)/(tsandcs)/privacy/page.mdx

@@ -70,7 +70,7 @@ Want to learn more about what we do with any information we collect? Review the
 
 **Personal information you disclose to us**
 
-**_In Short:_** *We collect personal information that you provide to us.*
+***In Short:*** *We collect personal information that you provide to us.*
 
 We collect personal information that you voluntarily provide to us when you register on the Services, express an interest in obtaining information about us or our products and Services, when you participate in activities on the Services, or otherwise when you contact us.
 
@@ -96,7 +96,7 @@ All personal information that you provide to us must be true, complete, and accu
 
 **2\. HOW DO WE PROCESS YOUR INFORMATION?**
 
-**_In Short:_** *We process your information to provide, improve, and administer our Services, communicate with you, for security and fraud prevention, and to comply with law. We may also process your information for other purposes with your consent.*
+***In Short:*** *We process your information to provide, improve, and administer our Services, communicate with you, for security and fraud prevention, and to comply with law. We may also process your information for other purposes with your consent.*
 
 **We process your personal information for a variety of reasons, depending on how you interact with our Services, including:**
 
@@ -158,7 +158,7 @@ In some exceptional cases, we may be legally permitted under applicable law to p
 
 **4\. WHEN AND WITH WHOM DO WE SHARE YOUR PERSONAL INFORMATION?**
 
-**_In Short:_** *We may share information in specific situations described in this section and/or with the following third parties.*
+***In Short:*** *We may share information in specific situations described in this section and/or with the following third parties.*
 
 We may need to share your personal information in the following situations:
 
@@ -168,35 +168,35 @@ We may need to share your personal information in the following situations:
 
 **5\. HOW DO WE HANDLE YOUR SOCIAL LOGINS?**
 
-**_In Short:_** *If you choose to register or log in to our Services using a social media account, we may have access to certain information about you.*
+***In Short:*** *If you choose to register or log in to our Services using a social media account, we may have access to certain information about you.*
 
 Our Services offer you the ability to register and log in using your third-party social media account details (like your Facebook or Twitter logins). Where you choose to do this, we will receive certain profile information about you from your social media provider. The profile information we receive may vary depending on the social media provider concerned, but will often include your name, email address, friends list, and profile picture, as well as other information you choose to make public on such a social media platform.
 
 We will use the information we receive only for the purposes that are described in this privacy notice or that are otherwise made clear to you on the relevant Services. Please note that we do not control, and are not responsible for, other uses of your personal information by your third-party social media provider. We recommend that you review their privacy notice to understand how they collect, use, and share your personal information, and how you can set your privacy preferences on their sites and apps.
 
 **6\. HOW LONG DO WE KEEP YOUR INFORMATION?**
 
-**_In Short:_** *We keep your information for as long as necessary to fulfill the purposes outlined in this privacy notice unless otherwise required by law.*
+***In Short:*** *We keep your information for as long as necessary to fulfill the purposes outlined in this privacy notice unless otherwise required by law.*
 
 We will only keep your personal information for as long as it is necessary for the purposes set out in this privacy notice, unless a longer retention period is required or permitted by law (such as tax, accounting, or other legal requirements). No purpose in this notice will require us keeping your personal information for longer than the period of time in which users have an account with us.
 
 When we have no ongoing legitimate business need to process your personal information, we will either delete or anonymize such information, or, if this is not possible (for example, because your personal information has been stored in backup archives), then we will securely store your personal information and isolate it from any further processing until deletion is possible.
 
 **7\. HOW DO WE KEEP YOUR INFORMATION SAFE?**
 
-**_In Short:_** *We aim to protect your personal information through a system of organizational and technical security measures.*
+***In Short:*** *We aim to protect your personal information through a system of organizational and technical security measures.*
 
 We have implemented appropriate and reasonable technical and organizational security measures designed to protect the security of any personal information we process. However, despite our safeguards and efforts to secure your information, no electronic transmission over the Internet or information storage technology can be guaranteed to be 100% secure, so we cannot promise or guarantee that hackers, cybercriminals, or other unauthorized third parties will not be able to defeat our security and improperly collect, access, steal, or modify your information. Although we will do our best to protect your personal information, transmission of personal information to and from our Services is at your own risk. You should only access the Services within a secure environment.
 
 **8\. DO WE COLLECT INFORMATION FROM MINORS?**
 
-**_In Short:_** *We do not knowingly collect data from or market to children under 18 years of age.*
+***In Short:*** *We do not knowingly collect data from or market to children under 18 years of age.*
 
 We do not knowingly solicit data from or market to children under 18 years of age. By using the Services, you represent that you are at least 18 or that you are the parent or guardian of such a minor and consent to such minor dependent’s use of the Services. If we learn that personal information from users less than 18 years of age has been collected, we will deactivate the account and take reasonable measures to promptly delete such data from our records. If you become aware of any data we may have collected from children under age 18, please contact us at niall@codu.co.
 
 **9\. WHAT ARE YOUR PRIVACY RIGHTS?**
 
-**_In Short:_** *In some regions, such as the European Economic Area (EEA), United Kingdom (UK), Switzerland, and Canada, you have rights that allow you greater access to and control over your personal information. You may review, change, or terminate your account at any time.*
+***In Short:*** *In some regions, such as the European Economic Area (EEA), United Kingdom (UK), Switzerland, and Canada, you have rights that allow you greater access to and control over your personal information. You may review, change, or terminate your account at any time.*
 
 In some regions (like the EEA, UK, Switzerland, and Canada), you have certain rights under applicable data protection laws. These may include the right (i) to request access and obtain a copy of your personal information, (ii) to request rectification or erasure; (iii) to restrict the processing of your personal information; (iv) if applicable, to data portability; and (v) not to be subject to automated decision-making. In certain circumstances, you may also have the right to object to the processing of your personal information. You can make such a request by contacting us by using the contact details provided in the section "HOW CAN YOU CONTACT US ABOUT THIS NOTICE?" below.
 
@@ -228,7 +228,7 @@ Most web browsers and some mobile operating systems and mobile applications incl
 
 **11\. DO UNITED STATES RESIDENTS HAVE SPECIFIC PRIVACY RIGHTS?**
 
-**_In Short:_** *If you are a resident of California, Colorado, Connecticut, Utah or Virginia, you are granted specific rights regarding access to your personal information.*
+***In Short:*** *If you are a resident of California, Colorado, Connecticut, Utah or Virginia, you are granted specific rights regarding access to your personal information.*
 
 **What categories of personal information do we collect?**
 

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,10 @@ 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;