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

  - Upgrade Next.js from 14.2.21 to 16.0.7
  - Upgrade React/React-DOM from 18.3.1 to 19.2.1
  - Upgrade next-auth from 4.x to 5.0.0-beta.30 (Auth.js)
  - Upgrade tRPC from v10 to v11.7.2
  - Upgrade TanStack React Query from v4 to v5.90.12
  - Upgrade Zod from 3.x to 4.1.13
  - Upgrade Sentry from 8.x to 10.29.0
  - Upgrade Framer Motion from 11.x to 12.23.25

  Breaking changes addressed:
  - Convert all page params to async (Next.js 16 requirement)
  - Migrate headers() to async function calls
  - Update next-auth to new Auth.js v5 API with handlers export
  - Replace 'loading' status with 'pending' (React Query v5)
  - Migrate ESLint from .eslintrc to flat config (eslint.config.mjs)
  - Update Zod error API (error.errors → error.issues)
  - Fix React 19 type changes (ChildNode → React.ReactNode)
  - Update TRPCReactProvider to accept serialized headers object

Author: NiallJoeMaher

.eslintrc

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

.gitignore

@@ -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"
+    }
+  }
+}

.mcp.json

@@ -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)/[username]/page.tsx

@@ -37,7 +37,7 @@ export async function slideOneSubmitAction(dataInput: TypeSlideOneSchema) {
     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);
     }
@@ -65,7 +65,7 @@ export async function slideTwoSubmitAction(dataInput: TypeSlideTwoSchema) {
     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);
     }
@@ -97,7 +97,7 @@ export async function slideThreeSubmitAction(dataInput: TypeSlideThreeSchema) {
     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);
     }

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

@@ -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/layout.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)/alpha/new/[[...postIdArr]]/_client.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/[slug]/page.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)/articles/_client.tsx

@@ -7,9 +7,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());