I've successfully created a function that fetches data from my API. However, when I attempt to import this function into another file, it doesn't seem to work. It's likely related to TypeScript types, but I'm struggling to find a solution.
Below is the function responsible for retrieving API information:
import { InferGetStaticPropsType } from "next";
type Post = {
project: string;
};
export const getStaticProps = async () => {
const res = await fetch("http://localhost:3100/");
const posts: Post[] = await res.json();
return {
props: {
posts,
},
};
};
function Blog({ posts }: InferGetStaticPropsType<typeof getStaticProps>) {
return (
<>
<h3>Hi</h3>
{console.log(posts)}
</>
);
}
export default Blog;
The issue arises when I try to call the above code, Blog, in my root index.tsx file:
import type { NextPage } from "next";
import Blog from "./blog";
const Home: NextPage = () => {
return (
<>
<Blog />
</>
);
};
export default Home;
This is the error I'm encountering: https://i.stack.imgur.com/OMZC6.png
If anyone wants to view the complete code here it is, with the API located in the express-api folder.