title: use getStaticProps in component
body: <p>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.</p>
  <p>this is my main component</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React from 'react';
  import {IMain} from "../../../../interfaces/components/IMenu/IMain";
  
  const Main:React.FC&lt;IMain&gt; = (props) =&gt; {
      console.log(props);
      return (
          &lt;div&gt;
          &lt;/div&gt;
      );
  };
  
  
  export async function getServerSideProps() {
      return {
          props: {
              data: 'gg'
          }
      };
  }
  
  export default Main;</code></pre>
  </div>
  </div>
  </p>
  <p>and this is my index.js page</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import Text from "./../components/ui/Text/Text";
  import Button from "../components/ui/Button/Button";
  import Main from "../components/Menu/Desktop/Main/Main";
  
  const Home = () =&gt; {
    return &lt;Main/&gt;;
  };
  
  
  
  
  export default Home;</code></pre>
  </div>
  </div>
  </p>