Just use the api?

Directly fetch from the apis in the components. You can make functions out of each required fetch.

And fetch them directly in the components needed

@Clown could you provide sample code for this?

and one more what is the differenct bw getStaticProps /getStaticPaths ?

IIRC:
getStaticProps isnt a thing in AppRouter. Its from the Pages Router.
You dont need in App Router.

GetStaticPaths should be generateStaticParams. Its for static generation of dynamic paths. Meaning dynamic paths can be generated using the params at build time instead of at runtime

And one more thing I react use can use usmemo usecallback to optimise the code . Do we need this in nextjs and if yes then how to use it ?

U use them exactly as you would in react.

They may require the use of "use client" directive at the first line however.

Fetch requests are automatically cached. Check those fetch docs for more details on how to opt out of it if needed and cases where the caching wont be done automatically