Next.js – API call from different page is not loading the data

Hello everyone I am extremely new at the Next.js world.

I am using the getStaticProps() to make an API call and in order to make it little organized, i have created a separate page “git” under “pages” folder and here is my code:

function Git({ stars }) {
    return <div>Next stars: {stars}</div>
  }

export async function getStaticProps() {
    const res = await fetch('https://api.github.com/repos/vercel/next.js')
    const json = await res.json()
    return { stars: json.stargazers_count }
}

export default Git

And i am trying to load the API data to the index.js file under the “pages” folder.

Inside the index.js file, i am using below to load the API data from the “Git” page

import fetch from "isomorphic-unfetch"
import Git from './Git'

And under the following

render () {
    return (
    <Git />

On the browser, i am not seeing the API data but i am seeing the HTML from the “Git” page

<div>Next stars: </div>

Is there any way if i can load the API data from different page to the index.js page?