I am just starting to learn Next.js and I have a preference for organizing my API functions in a separate folder called services.
I attempted to implement some code based on this topic but unfortunately, it did not work as expected. It seems like my api function is not being called, leading to the following error:
Unhandled Runtime Error
TypeError: data is undefined
Here is a snippet of my code:
index.tsx file :
import ShowResult from '../components/showResult'
export default function Home() {
return (
<div className='container mx-auto'>
<ShowResult />
</div>
);
}
components/showResult.tsx file :
import getUserRepos from '../services/api.service'
export async function getStaticProps() {
const data = await getUserRepos();
if (!data) {
return {
notFound: true,
};
}
return {
props: {
data,
},
};
}
export default function ShowResult({data}) {
return (
<div className=''>
<p>Result :</p>
<ul>
{data.map((repo) => (
<li key={repo.id}>{repo.name}</li>
))}
</ul>
</div>
)
}
services/api.service.ts file :
export async function getUserRepos() {
const response = await fetch(
`https://api.github.com/users/abdurrahmanseyidoglu/repos`
);
const data = await response.json();
return data;
}
Any advice on how to properly retrieve data from my api service function would be greatly appreciated.