fix: useFetch hook cannot handle two api calls

app/api/abouts/[id]/route.ts → app/api/about/[id]/route.ts

@@ -36,6 +36,6 @@ export async function PUT(request: Request, { params }: Params) {
 export async function GET(request: Request, { params }: Params  ) {
   const { id } = params;
   await connectMongoDB();
-  const abouts = await About.findOne({ _id: id });
-  return NextResponse.json({ abouts }, { status: 200 });
+  const about = await About.findOne({ _id: id });
+  return NextResponse.json({ about }, { status: 200 });
 };

app/api/abouts/route.ts → app/api/about/route.ts

@@ -33,6 +33,6 @@ export async function POST(request: Request, response: Response) {
 
 export async function GET() {
   await connectMongoDB();
-  const abouts = await About.find();
-  return NextResponse.json({ abouts })
+  const about = await About.find();
+  return NextResponse.json({ about })
 };

app/page.tsx

@@ -27,9 +27,18 @@ import About from '@components/about/About';
 import { TopicType } from '@customs/topic';
 import { AboutType } from '@customs/about';
 
+const handleTopics = async () => {
+  const data = await useFetch("/api/topics");
+  return data;
+}
+const handleAboutMe = async () => {
+  const data = await useFetch("/api/about");
+  return data;
+}
+
 const Home = async () => {
-  const { topics } = await useFetch("/api/topics")
-  // const { abouts } = await useFetch("/api/abouts")
+  const { topics } = await handleTopics()
+  const { about } = await handleAboutMe()
   return (
     <>
       <Image priority src={ AkaneDream } alt="" id="home-bg" width={'3000'} height={'3000'} className="w-full h-[930px] object-cover absolute z-[-100] opacity-[0.5] dark:opacity-[0.3] " />
@@ -51,7 +60,7 @@ const Home = async () => {
             <div className="about-me w-full flex flex-col lg:flex-row justify-between items-center lg:items-start 2xl:justify-evenly ">
               <TopicImage src={ Me } />
               <div className="about-me flex flex-col gap-[30px] ">
-                {/* {abouts.map((about: AboutType) => (
+                {about.map((about: AboutType) => (
                   <About 
                     key={ about._id }
                     displayName={ about.displayName }
@@ -64,7 +73,7 @@ const Home = async () => {
                     nationality={ about.nationality }
                     status={ about.status }
                     languages={ about.languages }/>
-                ))} */}
+                ))}
               </div>
             </div>
             <div className="topics w-full grid grid-cols-1 lg:grid-cols-2 gap-10 ">