title: getServerSideProps not working returning undefined when mapping next js
body: <p>what am i doing wrong here? i am trying to do getServerSideProps but
  localhost is working fine when hosted  i get
  Internal Server Error 500</p>
  <p>index.js</p>
  <pre><code>import React from &quot;react&quot;;
  import Head from &quot;next/head&quot;;
  import Navigation from &quot;./navigation&quot;;
  import { GetServerSideProps } from &quot;next&quot;;
  // import MyEditor from &quot;./editor&quot;;
  import Form from &quot;react-bootstrap/Form&quot;;
  import { useState } from &quot;react&quot;;
  import Questions3 from &quot;../pages/question&quot;;
  
  import axios from &quot;axios&quot;;
  import { FormControl, Button } from &quot;react-bootstrap&quot;;
  
  import InputGroup from &quot;react-bootstrap/InputGroup&quot;;
  function Home({ data }) {
    const [Questions, setQuestions] = useState();
    const [deatils1, setdeatils] = useState();
  
    function clickQuestion() {
      axios
        .post(&quot;https://ask-over.herokuapp.com/questionpost&quot;, {
          Name: Questions,
  
          Summary: deatils1,
  
          // username: this.props.sign.displayName,
          // useremail: this.props.sign.email,
        })
        .then(() =&gt; {
          window.location.reload();
        });
    }
    function question(e) {
      setQuestions(e.target.value);
      // this.setState({ ask: e.target.value });
    }
    function deatils(e) {
      setdeatils(e.target.value);
      // this.setState({ ask: e.target.value });
    }
  
    return (
      &lt;&gt;
        &lt;Head&gt;
          &lt;title&gt;wixten &lt;/title&gt;
          &lt;meta
            name=&quot;google-site-verification&quot;
            content=&quot;rqVH7Jc-L-NyyCYGf2LOEjRPFEUvi8iImncslSfxtac&quot;
          /&gt;
          &lt;link rel=&quot;shortcut icon&quot; href=&quot;/wixten.png&quot; /&gt;
          &lt;meta name=&quot;viewport&quot; content=&quot;initial-scale=1.0, width=device-width&quot; /&gt;
          &lt;meta
            name=&quot;description&quot;
            content=&quot;have all ur doubts cleared here at wixten . At wixten ask any thing you want and anyone in the world can see your questin and will be able to answer it &quot;
          /&gt;
        &lt;/Head&gt;
        &lt;Navigation /&gt;
        &lt;div&gt;
          &lt;div className=&quot;container search-box&quot;&gt;
            &lt;Form&gt;
              &lt;Form.Group className=&quot;mb-3&quot; controlId=&quot;exampleForm.ControlInput1&quot;&gt;
                &lt;Form.Label&gt;Title&lt;/Form.Label&gt;
                &lt;Form.Control
                  type=&quot;text&quot;
                  onChange={question}
                  placeholder=&quot;ask anything?&quot;
                /&gt;
              &lt;/Form.Group&gt;
              &lt;Form.Group
                className=&quot;mb-3&quot;
                controlId=&quot;exampleForm.ControlTextarea1&quot;
              &gt;
                &lt;Form.Label&gt;question&lt;/Form.Label&gt;
                &lt;Form.Control onChange={deatils} as=&quot;textarea&quot; rows={3} /&gt;
              &lt;/Form.Group&gt;
            &lt;/Form&gt;
  
            {/* &lt;Form&gt;
              &lt;InputGroup
                className=&quot;mb-3&quot;
                // onChange={this.question}
                // value={ask}
                // value={this.state.ask}
              &gt;
                &lt;FormControl
                  placeholder=&quot;ask anything?&quot;
                  aria-label=&quot;ask anything?&quot;
                  // aria-label=&quot;ask anything?&quot;
                  aria-describedby=&quot;basic-addon2&quot;
                /&gt;
                &lt;FormControl as=&quot;textarea&quot; rows={3} /&gt;
              &lt;/InputGroup&gt;
            &lt;/Form&gt; */}
            &lt;Button
              type=&quot;submit&quot;
              disabled={!deatils1 || !Questions}
              onClick={clickQuestion}
              variant=&quot;outline-secondary&quot;
              id=&quot;button-addon2&quot;
            &gt;
              ask?
            &lt;/Button&gt;
  
            &lt;Questions3 data={data} /&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/&gt;
    );
  }
  
  export async function getServerSideProps() {
    // Fetch data from external API
    const res = await fetch(`https://ask-over.herokuapp.com/questapi`);
    const data = await res.json();
    // console.log(data);
    // Pass data to the page via props
    return { props: { data } };
  }
  export default Home;
  </code></pre>
  <p>pages/question/index.jsx</p>
  <pre><code>import React from &quot;react&quot;;
  import Alert from &quot;react-bootstrap/Alert&quot;;
  import axios from &quot;axios&quot;;
  import { useState } from &quot;react&quot;;
  import { useEffect } from &quot;react&quot;;
  import Link from &quot;next/link&quot;;
  import Head from &quot;next/head&quot;;
  function Question3(props) {
    const data = props.data;
  
  
    return (
      &lt;div className=&quot;question11&quot;&gt;
       
        {data.map((itm) =&gt; (
         
          &lt;Link
            key={itm._id}
            href={{
              pathname: &quot;query/[itm]&quot;,
          
            }}
            as={`query/${encodeURIComponent(itm._id)}`}
          &gt;
           
            &lt;Alert className=&quot;question13&quot;&gt;{itm.Name}&lt;/Alert&gt;
          &lt;/Link&gt;
       
        ))}
      &lt;/div&gt;
    );
  }
  
  
  export default Question3;
  </code></pre>
  <p>when i call http://localhost:3000/the question page is rendering</p>
  <p>after deploying to vercel i get the following error</p>
  <p>when i depolyed i get this error
  <a href="https://i.stack.imgur.com/31dLV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/31dLV.png" alt="enter image description here" /></a></p>