Upgraded to NextJS 15 and all other dependencies

app/blogs/[blogKey]/page.tsx

@@ -20,10 +20,8 @@ import { notFound } from "next/navigation";
 import { MdKeyboardArrowLeft } from "react-icons/md";
 import ContentsSection from "./components/ContentsSection";
 
-type BlogPageProps = {
-  params: { blogKey: string };
-  searchParams: { [key: string]: string | string[] | undefined };
-};
+type Params = Promise<{ blogKey: string }>;
+type SearchParams = Promise<{ [key: string]: string | string[] | undefined }>;
 
 /**
  * Generates the metadata for the blog page.
@@ -36,9 +34,10 @@ type BlogPageProps = {
  * @see https://nextjs.org/docs/app/building-your-application/optimizing/metadata
  */
 export async function generateMetadata(
-  { params, searchParams }: BlogPageProps,
+  props: { params: Params; searchParams: SearchParams },
   parent: ResolvingMetadata
 ): Promise<Metadata> {
+  const params = await props.params;
   const blogKey: string = params.blogKey;
   const blog: BlogInterface = blogsDatabaseMap[blogKey];
 
@@ -76,11 +75,12 @@ export const generateStaticParams = async () => {
  * - The skills covered in the blog
  * - Related materials
  *
- * @param params The parameters for the blog page
+ * @param props The props for the blog page
  * @returns Content of the blog and the skills used
  */
-const BlogPage: React.FC<BlogPageProps> = ({ params }) => {
-  const blogKey: string = params.blogKey;
+const BlogPage: React.FC<{ params: Params }> = async ({ params }) => {
+  const resolvedParams = await params;
+  const blogKey: string = resolvedParams.blogKey;
   const basePath: string = BLOG_PAGE.path;
   const blogData: BlogInterface = blogsDatabaseMap[blogKey];
   const blogContent: string | undefined = getMarkdownFromFileSystem(
@@ -188,7 +188,6 @@ const BlogPage: React.FC<BlogPageProps> = ({ params }) => {
           </h3>
         </div>
 
-        {/* Buttons */}
         <div className="flex flex-col lg:flex-row justify-between mb-6 space-y-2 px-0 lg:px-20">
           <Link href={BLOG_PAGE.path}>
             <Button className="pl-3">

app/certificates/[certificateKey]/page.tsx

@@ -24,6 +24,9 @@ import { notFound } from "next/navigation";
 import React from "react";
 import { BsArrowUpRightCircle } from "react-icons/bs";
 
+type Params = Promise<{ certificateKey: string }>;
+type SearchParams = Promise<{ [key: string]: string | string[] | undefined }>;
+
 /**
  * Generates the metadata for the certificates page.
  * This includes the title and description of the page.
@@ -35,11 +38,11 @@ import { BsArrowUpRightCircle } from "react-icons/bs";
  * @see https://nextjs.org/docs/app/building-your-application/optimizing/metadata
  */
 export async function generateMetadata(
-  { params, searchParams }: CertificatesPageProps,
+  props: { params: Params; searchParams: SearchParams },
   parent: ResolvingMetadata
 ): Promise<Metadata> {
-  // Read route params
-  const certificateKey: string = params.certificateKey;
+  const resolvedParams = await props.params;
+  const certificateKey: string = resolvedParams.certificateKey;
   const certificate: CertificateInterface =
     certificateDatabaseMap[certificateKey];
 
@@ -57,26 +60,17 @@ export async function generateMetadata(
 }
 
 /**
- * Generates the metadata for the skill page.
- * This includes the title and description of the page.
- * This is used for SEO purposes.
+ * Generates the static params for certificates.
+ * This includes the list of all certificate keys.
  *
- * @param props The props for the skill page.
- * @param parent The parent metadata that is being resolved.
- * @returns The metadata for the skill page.
- * @see https://nextjs.org/docs/app/building-your-application/optimizing/metadata
+ * @returns The params for each certificate.
  */
 export const generateStaticParams = async () => {
   return Object.keys(certificateDatabaseMap).map((certificateKey) => ({
     certificateKey,
   }));
 };
 
-type CertificatesPageProps = {
-  params: { certificateKey: string };
-  searchParams: { [key: string]: string | string[] | undefined };
-};
-
 /**
  * Displays the page for a single certificate.
  * Contains:
@@ -92,11 +86,12 @@ type CertificatesPageProps = {
  * - The skills covered in the certificate
  * - Related materials
  *
- * @param params Parameters for the certificate page
+ * @param props Parameters for the certificate page
  * @returns Page displaying the certificate and its details
  */
-const CertificatesPage: React.FC<CertificatesPageProps> = ({ params }) => {
-  const certificateKey: string = params.certificateKey;
+const CertificatesPage: React.FC<{ params: Params }> = async ({ params }) => {
+  const resolvedParams = await params;
+  const certificateKey: string = resolvedParams.certificateKey;
   const certificateData: CertificateInterface =
     certificateDatabaseMap[certificateKey];
 

app/education/[courseKey]/[moduleKey]/page.tsx

@@ -21,10 +21,8 @@ import GroupedSkillsCategoriesInterface from "@/interfaces/skills/GroupedSkillsI
 import { Metadata, ResolvingMetadata } from "next";
 import { notFound } from "next/navigation";
 
-type ModulePageProps = {
-  params: { moduleKey: string };
-  searchParams: { [key: string]: string | string[] | undefined };
-};
+type Params = Promise<{ moduleKey: string }>;
+type SearchParams = Promise<{ [key: string]: string | string[] | undefined }>;
 
 /**
  * Generates the metadata for the module page.
@@ -37,18 +35,17 @@ type ModulePageProps = {
  * @see https://nextjs.org/docs/app/building-your-application/optimizing/metadata
  */
 export async function generateMetadata(
-  { params, searchParams }: ModulePageProps,
+  props: { params: Params; searchParams: SearchParams },
   parent: ResolvingMetadata
 ): Promise<Metadata> {
-  // Read route params
-  const moduleKey: string = params.moduleKey;
+  const resolvedParams = await props.params;
+  const moduleKey: string = resolvedParams.moduleKey;
   const moduleData: ModuleInterface = moduleDatabaseMap[moduleKey];
 
   if (!moduleData) {
     notFound();
   }
 
-  // Create metadata based on the course details
   return {
     title: `${developerName} - Courses: ${moduleData?.name}`,
     description: moduleData.learningOutcomes.join(". ") || "",
@@ -60,11 +57,8 @@ export async function generateMetadata(
 /**
  * Generates the static paths for the modules.
  * These are then used to pre-render the module pages.
- * This Incremental Static Regeneration allows the module to be displayed without a server.
- * This improves the performance of the website.
  *
  * @returns A list of all the keys for the static pages that need to be generated.
- * @see https://nextjs.org/docs/pages/building-your-application/data-fetching/incremental-static-regeneration
  */
 export const generateStaticParams = async () => {
   return Object.keys(moduleDatabaseMap).map((moduleKey) => ({
@@ -80,11 +74,12 @@ export const generateStaticParams = async () => {
  * - The skills covered in the module
  * - Related materials
  *
- * @param params The data for the module page
+ * @param props The data for the module page
  * @returns A page displaying the module details
  */
-const ModulePage: React.FC<ModulePageProps> = ({ params }) => {
-  const moduleKey: string = params.moduleKey;
+const ModulePage: React.FC<{ params: Params }> = async ({ params }) => {
+  const resolvedParams = await params;
+  const moduleKey: string = resolvedParams.moduleKey;
   const moduleData: ModuleInterface = moduleDatabaseMap[moduleKey];
   const parentCourse: CourseInterface =
     courseDatabaseMap[moduleData.parentCourse];