empty object with getStaticProps and typescript - reactjs

Question

I'm trying to fetch some data and via the doc's it seems it has to be via getStaticProps but I keep getting an empty object when logging the props inside my component
if you have any idea why feel free to let me know
here is my _app.tsx
const Child:React.FC = ({ children }) => {
const isDark = useSelector<ThemeState, ThemeState["isDark"]>(state => state.isDark)
return <div className={`${isDark ? "dark blackThemeColor test" : "white whiteThemeColor"}` + " min-h-screen font-body pr-0"} style={{height:'150vh'}}>{children}</div>;
}
const MyApp = ({ Component, pageProps }: AppProps) => {
return (
<Provider store={ThemeStore}>
<Application theme={theme}>
<Child>
<Navigation {...pageProps} />
<Component {...pageProps} />
</Child>
</Application>
</Provider>
);
};
export default MyApp
and my navigation.tsx
interface NavProps {
title: string;
body: string;
id: number;
userId: number
}
const Navigation: React.FC<NavProps> = (props: NavProps) => {
useEffect(() => {
console.log(props)
}, [])
console.log(props)
return (
<>
<div className={`w-full h-full `}>
<p>{props.title}</p>
</div>
</>
)
}
export default Navigation
export const getStaticProps: GetStaticProps = async (context) => {
const res = await fetch("https://jsonplaceholder.typicode.com/posts?_limit=6")
const data: NavProps = await res.json();
console.log(data)
return {
props: {
data
}
}
}

Answer 1

From your comment I take that the navigation.tsx file is not located in the pages folder. To quote the docs:
getStaticProps can only be exported from a page. You can’t export it from non-page files.
So you have to move the function to the page / route where you want to fetch the data or do it clientside.