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/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)/company/[slug]/page.tsx

@@ -7,9 +7,10 @@
     "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,7 +64,7 @@
           </div>
         </div>
         <div className="border-neutral-200 bg-neutral-100 p-4 dark:border-neutral-700 dark:bg-neutral-800">
           <a
             href="/sponsorship"
             className="text-sm font-medium text-neutral-500 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-300"
           >

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 });

app/(app)/jobs/create/_client.tsx

@@ -59,7 +59,7 @@ export default function Content() {
   const fileInputRef = useRef<HTMLInputElement>(null);
   const [imgUrl, setImgUrl] = useState<string | null>(null);
   const [uploadStatus, setUploadStatus] = useState<
-    "idle" | "loading" | "success" | "error"
+    "idle" | "pending" | "success" | "error"
   >("idle");
   const onSubmit: SubmitHandler<saveJobsInput> = (values) => {
     const formData = {
@@ -70,12 +70,12 @@ export default function Content() {
   };
 
   const handleLogoUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
-    if (uploadStatus === "loading") {
+    if (uploadStatus === "pending") {
       return toast.info("Upload in progress, please wait...");
     }
 
     if (e.target.files && e.target.files.length > 0) {
-      setUploadStatus("loading");
+      setUploadStatus("pending");
 
       const file = e.target.files[0];
       const { size, type } = file;
@@ -155,9 +155,9 @@ export default function Content() {
                 onClick={() => {
                   fileInputRef.current?.click();
                 }}
-                disabled={uploadStatus === "loading"}
+                disabled={uploadStatus === "pending"}
               >
-                {uploadStatus === "loading" ? "Uploading..." : "Change Logo"}
+                {uploadStatus === "pending" ? "Uploading..." : "Change Logo"}
               </Button>
               <Input
                 type="file"

app/(app)/my-posts/_client.tsx

@@ -104,7 +104,7 @@ const MyPosts = () => {
           title="Delete article"
           subTitle="Are you sure you want to delete this article?"
           content="All of the data will be permanently removed from our servers forever. This action cannot be undone."
-          confirmText={deleteStatus === "loading" ? "Deleting..." : "Delete"}
+          confirmText={deleteStatus === "pending" ? "Deleting..." : "Delete"}
           cancelText="Cancel"
         />
       )}
@@ -113,7 +113,7 @@ const MyPosts = () => {
           <Tabs tabs={tabs} />
         </div>
         <div>
-          {selectedTabData.status === "loading" && (
+          {selectedTabData.status === "pending" && (
             <p className="py-4 font-medium">Fetching your posts...</p>
           )}
           {selectedTabData.status === "error" && (

app/(app)/notifications/_client.tsx

@@ -89,13 +89,13 @@ const Notifications = () => {
           {status === "error" && (
             <div>Something went wrong... Please refresh your page.</div>
           )}
-          {status === "loading" &&
+          {status === "pending" &&
             Children.toArray(
               Array.from({ length: 7 }, () => {
                 return <Placeholder />;
               }),
             )}
-          {status !== "loading" && noNotifications && (
+          {status !== "pending" && noNotifications && (
             <p className="text-lg font-semibold text-neutral-900 dark:text-neutral-50">
               No new notifications. ✅{" "}
             </p>

app/(app)/saved/_client.tsx

@@ -32,7 +32,7 @@ const SavedPosts = () => {
     <div className="relative mx-4 max-w-2xl sm:mx-auto">
       <PageHeading>Saved items</PageHeading>
       <div>
-        {bookmarkStatus === "loading" &&
+        {bookmarkStatus === "pending" &&
           Children.toArray(
             Array.from({ length: 7 }, () => {
               return <ArticleLoading />;

app/(app)/settings/_client.tsx

@@ -41,7 +41,7 @@ type User = Pick<
 >;
 
 type ProfilePhoto = {
-  status: "success" | "error" | "loading" | "idle";
+  status: "pending" | "error" | "success" | "idle";
   url: string;
 };
 
@@ -105,7 +105,7 @@ const Settings = ({ profile }: { profile: User }) => {
   };
 
   const uploadToUrl = async (signedUrl: string, file: File) => {
-    setProfilePhoto({ status: "loading", url: "" });
+    setProfilePhoto({ status: "pending", url: "" });
 
     if (!file) {
       setProfilePhoto({ status: "error", url: "" });
@@ -204,7 +204,7 @@ const Settings = ({ profile }: { profile: User }) => {
               square
               src={
                 profilePhoto.status === "error" ||
-                profilePhoto.status === "loading"
+                profilePhoto.status === "pending"
                   ? undefined
                   : `${profilePhoto.url}`
               }