i started a project with nextjs and typescript.i have a main component that i call it in index.js page i use getStaticProps function in main componet getStaticProps return a props and when i log props in my main component i recieved undifined in my console. i want to know if using the getStaticProps is wrong and I have to just use that function in pages or not. i am newbie in next js and I would be very grateful if anyone could help me.
this is my main component
import React from 'react';
import {IMain} from "../../../../interfaces/components/IMenu/IMain";
const Main:React.FC<IMain> = (props) => {
console.log(props);
return (
<div>
</div>
);
};
export async function getServerSideProps() {
return {
props: {
data: 'gg'
}
};
}
export default Main;and this is my index.js page
import Text from "./../components/ui/Text/Text";
import Button from "../components/ui/Button/Button";
import Main from "../components/Menu/Desktop/Main/Main";
const Home = () => {
return <Main/>;
};
export default Home;getStaticProps can only be exported from a page. You can’t export it from non-page files.It will not work if you add getStaticProps as a property of the page component.
https://nextjs.org/docs/basic-features/data-fetching#only-allowed-in-a-page