Hello everyone, I am brand new to the world of Next.js.
To keep things organized, I decided to use getStaticProps() for making API calls. I created a separate page called "git" under the "pages" folder. Here is the code snippet:
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
I wanted to load the API data from the "Git" page into the index.js file within the "pages" folder.
In the index.js file, I included the following code to import and load the API data from the "Git" page:
import fetch from "isomorphic-unfetch"
import Git from './Git'
And then added this code:
render () {
return (
<Git />
However, when viewing in the browser, I only see HTML content from the "Git" page instead of the API data like intended.
<div>Next stars: </div>
I can access the proper API data if I directly visit the "Git" page, for example: .
Problem Statement: The issue lies in passing the API data from the "Git" page to the main page "index.js". Is there a way to achieve this?