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?

However, if i directly access the page for example: http://0.0.0.0:3000/Git then i get the proper API data.

Issue The issue is about the API data in the page "Git" is not getting passed to the main page "index.js" is there any way if i can pass the data from the "Git" to the "index.js"