aboutMe data is serverside now

src/app/_components/about-me/page.tsx

@@ -1,6 +1,4 @@
-"use client";
+import React from "react";
-
-import React, { useEffect, useState } from "react";
 import Skeleton from "react-loading-skeleton";
 import "react-loading-skeleton/dist/skeleton.css";
 
@@ -26,11 +24,11 @@ type AboutMeDataType = {
   skills: SkillType[];
 };
 
-type AboutMeProps = {
+export default async function AboutMe() {
-  data: AboutMeDataType;
+  const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/about-me`, {
-};
+    cache: "no-store", // غیرفعال کردن کش
-
+  });
-export default function AboutMe({ data }: AboutMeProps) {
+  const aboutMeData: AboutMeDataType = await response.json();
   return (
     <div
       className="my-10 flex w-full max-w-[90%] flex-wrap items-center justify-center gap-10 pt-[120px]"
@@ -38,14 +36,14 @@ export default function AboutMe({ data }: AboutMeProps) {
     >
       <div className="flex w-full flex-col items-center md:w-[50%]">
         <h2 className="mb-10 text-[55px] font-[800] text-black">
-          {data?.title || <Skeleton width={300} height={100} />}
+          {aboutMeData?.title || <Skeleton width={300} height={100} />}
         </h2>
         <p className="text-justify text-[21px] font-[400] text-black">
-          {data?.description || <Skeleton width={350} height={30} />}
+          {aboutMeData?.description || <Skeleton width={350} height={30} />}
         </p>
         <ul className="mt-10 flex w-full flex-col gap-10">
-          {data?.skills ? (
+          {aboutMeData?.skills ? (
-            data?.skills.map((skill, key) => (
+            aboutMeData?.skills.map((skill, key) => (
               <li key={key}>
                 <h3 className="mb-2 text-[18px] font-[700]">{skill.title}</h3>
                 <div className="h relative h-[12px] w-full rounded-lg bg-[#EDECEC]">
@@ -66,9 +64,9 @@ export default function AboutMe({ data }: AboutMeProps) {
           )}
         </ul>
       </div>
-      {data?.image ? (
+      {aboutMeData?.image ? (
         <div className="flex w-full max-w-[90%] items-center justify-center md:w-[40%]">
-          <img src={data.image} alt="profile picture" className="" />
+          <img src={aboutMeData.image} alt="profile picture" className="" />
         </div>
       ) : (
         <Skeleton circle={true} width={360} height={360} />

src/app/page.tsx

@@ -5,33 +5,7 @@ import AboutMe from "./_components/about-me/page";
 import Services from "./_components/services/page";
 import MyProjects from "./_components/my-projects/page";
 
-type SkillType = {
-  id: 1;
-  title: string;
-  image: string;
-  description: string;
-  link: string;
-  percentage: number;
-  about_me_id: number;
-  created_at: string;
-  updated_at: string;
-};
-
-type AboutMeDataType = {
-  id: number;
-  title: string;
-  description: string;
-  image: string;
-  created_at: string;
-  updated_at: string;
-  skills: SkillType[];
-};
-
 export default async function Home() {
-  const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/about-me`, {
-    cache: "no-store", // غیرفعال کردن کش
-  });
-  let aboutMeData: AboutMeDataType = await response.json();
 
   return (
     <div className="my-15 flex w-full max-w-[1420px] flex-col items-center gap-[50px]">
@@ -108,7 +82,7 @@ export default async function Home() {
         </div>
       </div>
 
-      <AboutMe data={aboutMeData} />
+      <AboutMe />
 
       <Services />