chore: update dependencies and configurations; enhance Next.js setup with turbopack and improved image handling; adjust API version for Stripe integration; refine TypeScript settings and component imports for better compatibility

Author: danieldanielecki

.github/workflows/vercel-deploy.yml

@@ -34,7 +34,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v2
         with:
-          node-version: "20.x"
+          node-version: "24.x"
 
       - name: Install Vercel CLI
         run: npm install --global vercel@latest

app/api/get-ip/route.ts

@@ -12,9 +12,9 @@ export async function GET(request: NextRequest) {
 
     let ip = forwarded?.split(",")[0] || realIp || cfConnectingIp;
 
-    // If no IP found in headers, try to get from connection
+    // If no IP found in headers, use fallback (request.ip removed in Next 15+)
     if (!ip) {
-      ip = request.ip || "127.0.0.1";
+      ip = "127.0.0.1";
     }
 
     // Clean up the IP (remove port if present)

app/api/profile/route.ts

@@ -170,7 +170,7 @@ export async function GET(request: NextRequest) {
             const stripeSecretKey = process.env.NEXT_PUBLIC_STRIPE_SECRET_KEY;
             if (stripeSecretKey) {
               const stripe = new Stripe(stripeSecretKey, {
-                apiVersion: "2025-11-17.clover",
+                apiVersion: "2025-12-15.clover" as Stripe.LatestApiVersion,
               });
               const stripeSubscription = (await stripe.subscriptions.retrieve(
                 latestSubscription.stripe_subscription_id,

app/api/stripe/create-checkout-session/route.ts

@@ -41,7 +41,7 @@ export async function POST(request: NextRequest) {
 
     // Initialize Stripe
     const stripe = new Stripe(stripeSecretKey, {
-      apiVersion: "2025-11-17.clover",
+      apiVersion: "2025-12-15.clover" as Stripe.LatestApiVersion,
     });
 
     // Get the base URL for redirects

app/api/stripe/webhook/route.ts

@@ -138,7 +138,7 @@ export async function POST(request: NextRequest) {
   }
 
   const stripe = new Stripe(stripeSecretKey, {
-    apiVersion: "2025-11-17.clover",
+    apiVersion: "2025-12-15.clover" as Stripe.LatestApiVersion,
   });
 
   let event: Stripe.Event;

app/exam/page.tsx

@@ -2,7 +2,8 @@
 
 import { useEffect, useState } from "react";
 import type { NextPage } from "next";
-import { gql, useQuery } from "@apollo/client";
+import { gql } from "@apollo/client";
+import { useQuery } from "@apollo/client/react";
 import useTimer from "@azure-fundamentals/hooks/useTimer";
 import { Button } from "@azure-fundamentals/components/Button";
 import QuizExamForm from "@azure-fundamentals/components/QuizExamFormUF";
@@ -27,16 +28,23 @@ const questionsQuery = gql`
   }
 `;
 
+type RandomQuestionsData = {
+  randomQuestions: Question[];
+};
+
 const Exam: NextPage = () => {
   const { isAccessBlocked, isInTrial } = useTrialAccess();
   const [searchParams, setSearchParams] = useState<URLSearchParams | null>(
     null,
   );
   const url = searchParams?.get("url") || "";
-  const { data, loading, error } = useQuery(questionsQuery, {
-    variables: { range: 30, link: url },
-    skip: !url, // Skip query if URL is not available
-  });
+  const { data, loading, error } = useQuery<RandomQuestionsData>(
+    questionsQuery,
+    {
+      variables: { range: 30, link: url },
+      skip: !url, // Skip query if URL is not available
+    },
+  );
   // Calculate timer: 2 minutes per question (30 questions = 60 minutes)
   const examQuestionCount = 30; // Fixed number of questions in exam mode
   const minutesPerQuestion = 2;
@@ -81,7 +89,7 @@ const Exam: NextPage = () => {
   };
 
   const getResultPoints = (points: number) => {
-    const maxPoints = data?.randomQuestions?.length;
+    const maxPoints = data?.randomQuestions?.length ?? 1;
     const percentage = Math.round((points / maxPoints) * 10000) / 100;
     if (percentage >= 75) {
       setPassed(true);

app/practice/page.tsx

@@ -1,7 +1,8 @@
 "use client";
 
 import { useState, useEffect, useCallback } from "react";
-import { gql, useQuery } from "@apollo/client";
+import { gql } from "@apollo/client";
+import { useQuery } from "@apollo/client/react";
 import type { NextPage } from "next";
 import QuizForm from "@azure-fundamentals/components/QuizForm";
 import { useTrialAccess } from "@azure-fundamentals/hooks/useTrialAccess";
@@ -31,6 +32,13 @@ const questionsQuery = gql`
   }
 `;
 
+type QuestionByIdData = {
+  questionById: import("@azure-fundamentals/components/types").Question | null;
+};
+type QuestionsCountData = {
+  questions: { count: number };
+};
+
 const Practice: NextPage = () => {
   const { isAccessBlocked, isInTrial } = useTrialAccess();
   const [searchParams, setSearchParams] = useState<URLSearchParams | null>(
@@ -44,7 +52,7 @@ const Practice: NextPage = () => {
   const editedUrl =
     url && url.includes("/") ? url.substring(0, url.lastIndexOf("/") + 1) : "";
 
-  const { loading, error, data } = useQuery(questionQuery, {
+  const { loading, error, data } = useQuery<QuestionByIdData>(questionQuery, {
     variables: { id: currentQuestionIndex - 1, link: url },
     skip: !url, // Skip query if URL is not available
   });
@@ -58,7 +66,7 @@ const Practice: NextPage = () => {
     data: questionsData,
     loading: questionsLoading,
     error: questionsError,
-  } = useQuery(questionsQuery, {
+  } = useQuery<QuestionsCountData>(questionsQuery, {
     variables: { link: url },
     skip: !url, // Skip query if URL is not available
   });
@@ -199,7 +207,13 @@ const Practice: NextPage = () => {
       )}
       <QuizForm
         isLoading={loading || questionsLoading}
-        questionSet={data?.questionById}
+        questionSet={
+          data?.questionById ?? {
+            question: "",
+            options: [],
+            images: [],
+          }
+        }
         handleNextQuestion={handleNextQuestion}
         totalQuestions={Math.max(0, (questionsData?.questions?.count || 0) - 1)}
         currentQuestionIndex={currentQuestionIndex}

components/ApolloProvider.tsx

@@ -2,7 +2,7 @@
 
 import client from "@azure-fundamentals/lib/graphql/apollo-client";
 import { ReactNode } from "react";
-import { ApolloProvider as NextApolloProvider } from "@apollo/client";
+import { ApolloProvider as NextApolloProvider } from "@apollo/client/react";
 
 type RootLayoutProps = {
   children: ReactNode;

components/Footer.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import React from "react";
 import {
   SiDiscord,
   SiGithub,
@@ -21,44 +22,50 @@ const Footer = () => {
   const iconSize = 28;
   const { theme } = useTheme();
 
-  const socialMediaLinks = [
-    {
-      url: "https://discord.gg/RFjtXKfJy3",
-      icon: <SiDiscord className="discord" size={iconSize} />,
-    },
-    {
-      url: "https://github.com/ditectrev",
-      icon: <SiGithub className="github" size={iconSize} />,
-    },
-    {
-      url: "https://instagram.com/ditectrev",
-      icon: <SiInstagram className="instagram" size={iconSize} />,
-    },
-    {
-      url: "https://linkedin.com/company/ditectrev",
-      icon: <SiLinkedin className="linkedin" size={iconSize} />,
-    },
-    {
-      url: "https://medium.com/@ditectrev",
-      icon: <SiMedium className="medium" size={iconSize} />,
-    },
-    {
-      url: "https://patreon.com/Ditectrev",
-      icon: <SiPatreon className="patreon" size={iconSize} />,
-    },
-    {
-      url: "https://udemy.com/user/social-ditectrev",
-      icon: <SiUdemy className="udemy" size={iconSize} />,
-    },
-    {
-      url: "https://x.com/ditectrev",
-      icon: <SiX className="x" size={iconSize} />,
-    },
-    {
-      url: "https://youtube.com/@Ditectrev",
-      icon: <SiYoutube className="youtube" size={iconSize} />,
-    },
-  ];
+  const socialMediaLinks: Array<{ url: string; Icon: any; className: string }> =
+    [
+      {
+        url: "https://discord.gg/RFjtXKfJy3",
+        Icon: SiDiscord,
+        className: "discord",
+      },
+      {
+        url: "https://github.com/ditectrev",
+        Icon: SiGithub,
+        className: "github",
+      },
+      {
+        url: "https://instagram.com/ditectrev",
+        Icon: SiInstagram,
+        className: "instagram",
+      },
+      {
+        url: "https://linkedin.com/company/ditectrev",
+        Icon: SiLinkedin,
+        className: "linkedin",
+      },
+      {
+        url: "https://medium.com/@ditectrev",
+        Icon: SiMedium,
+        className: "medium",
+      },
+      {
+        url: "https://patreon.com/Ditectrev",
+        Icon: SiPatreon,
+        className: "patreon",
+      },
+      {
+        url: "https://udemy.com/user/social-ditectrev",
+        Icon: SiUdemy,
+        className: "udemy",
+      },
+      { url: "https://x.com/ditectrev", Icon: SiX, className: "x" },
+      {
+        url: "https://youtube.com/@Ditectrev",
+        Icon: SiYoutube,
+        className: "youtube",
+      },
+    ];
 
   const gradientClass =
     theme === "dark"
@@ -69,18 +76,22 @@ const Footer = () => {
     <footer className={`relative ${gradientClass} overflow-hidden`}>
       <ParticlesFooter />
       <div className="relative z-10 mx-3 my-3 social-icons-container text-white">
-        {socialMediaLinks.map((link, index) => (
-          <a
-            key={index}
-            className="px-2"
-            href={link.url}
-            target="_blank"
-            rel="noopener noreferrer"
-            aria-label={`Visit ${link.url}`}
-          >
-            {link.icon}
-          </a>
-        ))}
+        {socialMediaLinks.map((link, index) => {
+          const IconComponent = link.Icon;
+          return (
+            <a
+              key={index}
+              className="px-2"
+              href={link.url}
+              target="_blank"
+              rel="noopener noreferrer"
+              aria-label={`Visit ${link.url}`}
+            >
+              {/* @ts-ignore - react-icons types incompatible with React 18.3 strict types */}
+              <IconComponent className={link.className} size={iconSize} />
+            </a>
+          );
+        })}
       </div>
 
       {/* GitHub Star */}
@@ -104,7 +115,7 @@ const Footer = () => {
 
       {/* Copyright */}
       <p className="relative z-10 text-white text-sm flex justify-center">
-        &copy; 2026 Ditectrev and its contributors
+        &copy; {currentYear} Ditectrev and its contributors
       </p>
     </footer>
   );

components/Header.tsx

@@ -62,6 +62,7 @@ const Header = () => {
   ];
 
   const ExternalLinkIcon = () => (
+    // @ts-ignore - react-icons types incompatible with React 18.3 strict types
     <FiExternalLink className="inline-block ml-1 w-3 h-3 external-link-icon" />
   );