title: How to import API based component in Next js
body: <p>I have created Api.jsx file in side of API calling, if I checked http://localhost:3000/Api data is coming, but I want to call Api.jsx file import to index.js file but data is don't come, what am missing could you please let me know.</p>
  <p>Api.jsx</p>
  <pre><code>function Api({ stars }) {
    return &lt;div&gt;Next stars: {stars}&lt;/div&gt;
  }
  
  Api.getInitialProps = async (ctx) =&gt; {
    const res = await fetch('https://api.github.com/repos/vercel/next.js')
    const json = await res.json()
    return { stars: json.stargazers_count }
  }
  
  export default Api
  </code></pre>
  <p>index.js</p>
  <pre><code>import dynamic from 'next/dynamic'
  // import Head from 'next/head'
  // import Image from 'next/image' 
  // import Blog from '../comps/Blog'
  import styles from '../styles/Home.module.css'
  import 'semantic-ui-css/semantic.min.css'
  const ApiComponent= dynamic(() =&gt; import('./comps/Api'));
  
  export default function Home() {
    return (
      &lt;div className={styles.container}&gt;
        &lt;p&gt;Welcome&lt;/p&gt;
        &lt;ApiComponent/&gt;
  
        &lt;footer className={styles.footer}&gt;
          &lt;a
            href=&quot;https://vercel.com?utm_source=create-next-app&amp;utm_medium=default-template&amp;utm_campaign=create-next-app&quot;
            target=&quot;_blank&quot;
            rel=&quot;noopener noreferrer&quot;
          &gt;
            Powered by{' '}
            &lt;span className={styles.logo}&gt;
              &lt;Image src=&quot;/vercel.svg&quot; alt=&quot;Vercel Logo&quot; width={72} height={16} /&gt;
            &lt;/span&gt;
          &lt;/a&gt;
        &lt;/footer&gt; */}
      &lt;/div&gt;
    )
  }
  </code></pre>