Migrate to strapi v5.

Signed-off-by: vLuckyyy <[email protected]>

Author: vLuckyyy

components/page/projects/ProjectItem.tsx

@@ -16,7 +16,7 @@ export default function ProjectItem({ repo, index }: ProjectItemProps) {
   return (
     <motion.div
       ref={ref}
-      key={repo.id}
+      key={repo.documentId}
       className={`flex flex-col items-center justify-between gap-12 text-center sm:flex-row sm:text-left ${
         index % 2 === 0 ? "sm:flex-row-reverse" : ""
       }`}
@@ -32,18 +32,18 @@ export default function ProjectItem({ repo, index }: ProjectItemProps) {
           animate={{ y: 0, opacity: 1 }}
           transition={{ duration: 0.3 }}
         >
-          {repo.attributes.name}
+          {repo.name}
         </motion.h1>
         <motion.p
           className="mb-6 max-w-2xl font-light text-gray-500 dark:text-gray-400 md:text-lg lg:mb-8 lg:text-xl"
           initial={{ y: -50, opacity: 0 }}
           animate={{ y: 0, opacity: 1 }}
           transition={{ duration: 0.3 }}
         >
-          {repo.attributes.description}
+          {repo.description}
         </motion.p>
         <div className="flex justify-center sm:justify-start">
-          <a href={repo.attributes.repository_url} target="_blank" rel="noreferrer">
+          <a href={repo.repository_url} target="_blank" rel="noreferrer">
             <ProjectButton title="Repository" />
           </a>
         </div>
@@ -57,8 +57,8 @@ export default function ProjectItem({ repo, index }: ProjectItemProps) {
           transition={{ duration: 0.3 }}
         >
           <Image
-            alt={`${repo.attributes.name} project image`}
-            src={repo.attributes.banner_url}
+            alt={`${repo.name} project image`}
+            src={repo.banner_url}
             className="mx-auto hidden rounded-xl object-cover sm:block"
             height={500}
             width={1000}

components/page/projects/Projects.tsx

@@ -52,7 +52,7 @@ export default function Projects() {
         {/* Projects list with alternating layout */}
         <div className="lg:alternate mt-8 space-y-8 lg:mt-12">
           {projects.map((repo, index) => (
-            <ProjectItem key={repo.id} repo={repo} index={index} />
+            <ProjectItem key={repo.documentId} repo={repo} index={index} />
           ))}
         </div>
       </div>

components/page/projects/projectService.ts

@@ -14,7 +14,7 @@ export async function fetchProjects(): Promise<Project[]> {
 
   const data = (await response.json()) as ApiResponse;
 
-  // Validate response structure
+  // Now data.data is already an array of Project (no attributes nesting)
   if (data && Array.isArray(data.data)) {
     return data.data;
   } else {

components/page/projects/types.ts

@@ -1,11 +1,9 @@
 export interface Project {
-  id: string;
-  attributes: {
-    name: string;
-    description: string;
-    repository_url: string;
-    banner_url: string;
-  };
+  documentId: string;
+  name: string;
+  description: string;
+  repository_url: string;
+  banner_url: string;
 }
 
 export interface ProjectItemProps {

components/page/team/Team.tsx

@@ -60,7 +60,7 @@ export default function Team() {
           staggerDelay={0.18}
         >
           {members.map((member, index) => (
-            <TeamMember key={member.id} member={member.attributes} index={index} />
+            <TeamMember key={member.documentId || index} member={member} index={index} />
           ))}
         </AnimatedContainer>
       </div>

components/page/team/TeamMember.tsx

@@ -47,8 +47,8 @@ export default function TeamMember({ member }: TeamMemberProps) {
       </h3>
 
       {/* Member roles */}
-      {member.team_roles.data.map((role, roleIndex) => (
-        <p key={roleIndex}>{role.attributes.name}</p>
+      {(member.team_roles?.data ?? []).map((role, roleIndex) => (
+        <p key={roleIndex}>{role.name}</p>
       ))}
 
       {/* Social links with hover animations */}

components/page/team/teamService.ts

@@ -12,7 +12,7 @@ export async function fetchTeamMembers(): Promise<Member[]> {
 
   const data = (await response.json()) as StrapiResponse;
 
-  // Validate response structure
+  // Now data.data is already an array of Member (no attributes nesting)
   if (data && Array.isArray(data.data)) {
     return data.data;
   } else {

components/page/team/types.ts

@@ -1,29 +1,21 @@
 export interface TeamRole {
-  attributes: {
-    name: string;
-  };
+  name: string;
 }
 
-export interface MemberData {
+export interface Member {
+  documentId: string;
   avatar_url: string;
   name: string;
-  team_roles: {
-    data: TeamRole[];
-  };
+  team_roles: { data: TeamRole[] };
   github?: string;
   linkedin?: string;
 }
 
 export interface TeamMemberProps {
-  member: MemberData;
+  member: Member;
   index: number;
 }
 
-export interface Member {
-  id: string;
-  attributes: MemberData;
-}
-
 export interface StrapiResponse {
   data: Member[];
   meta?: Record<string, unknown>;

next.config.mjs

@@ -26,6 +26,11 @@ const nextConfig = {
         hostname: "avatars-githubusercontent.webp.se",
         port: "",
       },
+      {
+        protocol: "https",
+        hostname: "private-user-images.githubusercontent.com",
+        port: "",
+      },
       {
         protocol: "https",
         hostname: "i.imgur.com",