title: How to import API route in NextJS for getStaticProps?
body: <p>I am using NextJS's <code>getStaticProps</code> to fetch some data from an external API. Reading the data fetching documentation on <a href="https://nextjs.org/docs/basic-features/data-fetching#getstaticprops-static-generation" rel="noreferrer">getStaticProps</a> I came across this particular note:</p>
  <blockquote>
  <p>Note: You should not use fetch() to call an API route in your
  application. Instead, directly import the API route and call its
  function yourself. You may need to slightly refactor your code for
  this approach.</p>
  </blockquote>
  <p>Right now I am calling <code>getStaticProps</code> directly from a page component called <code>Index</code> as follows:</p>
  <pre><code>export default function Index({ data }) {
    return &lt;div&gt;{data}&lt;/div&gt;;
  }
  
  export async function getStaticProps() {
    const response = await fetch(&quot;http://127.0.0.1:8000/data&quot;);
    const data = await response.json();
    return { props: { data } };
  }
  </code></pre>
  <p>As per the above documentation, this should not be done. How can I restructure my code to fetch data correctly? What does it mean to &quot;import the API route and call its function yourself?&quot;</p>