Next Js - getStaticProps is not returning anything

Question

I don't know why my getStaticProps() does not return anything. I hopped through many articles but can't find a solution.

The console.log gives me undefined on page.js and categories.jsx both.

I am using app router.

app/page.js

import Landing from '@/components/Landing'
import Categories from '@/components/Categories'


export const getServerSideProps =  async () => {
  const res = await fetch('https://fakestoreapi.com/products/categories');
  const categories = await res.json();
  
  return {
    props: {
      categories,
    },
  }
}


export default function Home({ categories }) {
  console.log("cat from home", categories)

  return (
    <div className='home'>
      <Landing />
      <Categories categories={categories} />
      
    </div>
  )
}

@components/categories

"use client"
import { motion } from "framer-motion"
import Link from "next/link"
import Image from 'next/image'

const Categories = ({ categories }) => {
    console.log("cat from cat", categories)
    
    const categoriesVariants = {
        visible: { opacity: 1, scale: 1, transition: { duration: .5 } },
        hidden: { opacity: 0, scale: 0.8 },
    }

    return (
        <section className="categories py-20 ">
            <h2 className='text-3xl font-bold capitalize mb-14'>Shop Our top categories</h2>
            <div className="categories-cards-container flex flex-wrap justify-center gap-10 w-full">
                {
                    categories?.map((cat, idx) => {
                        return (
                            <motion.div key={idx} initial="hidden" whileInView="visible" viewport={{ once: true }} variants={categoriesVariants} >
                                <Link href={`/products/category/${cat}`} className='category-card block relative group overflow-hidden  min-w-[200px] w-[250px] h-[400px] sm:w-[80%] xs:w-full   rounded-xl cursor-pointer'>
                                    <Image className='absolute -z-10 top-0 left-0 w-full h-full object-cover group-hover:scale-[1.2] transition duration-500 brightness-50' src={`https://source.unsplash.com/random/180x320/?${cat}`} alt={`${cat}`} width="200" height="300" />
                                    <h3 className="absolute top-[50%] translate-y-[-50%] left-0 w-full text-center text-2xl category-title capitalize font-bold text-gray-100 group-hover:opacity-100 group-hover:-translate-y-6 opacity-75 transition duration-500">{cat}</h3>
                                    <p className="browse -z-10 flex items-center gap-1 justify-center capitalize absolute bottom-[0%] left-0 w-full h-full  py-5 bg-[rgba(0,0,0,.3)] text-green-800  opacity-0  group-hover:opacity-100  text-center transition duration-500  text-sm">
                                        {/* {cat} <span> <AiOutlineArrowRight /> </span> */}
                                    </p>
                                </Link>
                            </motion.div>
                        )
                    })}
            </div>
        </section>
    )
}

export default Categories