use getStaticProps in component

Question

I started a project with next js and typescript. I have a main component that I call it in the index.js page I use the getStaticProps function in the main component getStaticProps returns a prop object and when I log this prop in my main component I received undefined in my console. I want to know using the getStaticProps in the component is wrong and I have just to use that function in pages or not. I am a 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 = (props) => {
    console.log(props);
    return (
        
        
    );
};


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 ;
};




export default Home;

user_9862206 · Answer

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

user_5253664 · Answer

Here's a possible solution:

Using a node script (like predev) to fetch your content and store it in JSON files in your project, then reference those JSON files in your component.

Posted about it here: https://dev.to/brewhousedigital/nextjs-getstaticprops-with-components-f25

user_18763508 · Answer

Solution

used react's useEffect() for component
and for page getStaticProps() of next.js
after combine the two will have hybrid page

use getStaticProps in component

3 Answers