I'm currently enrolled in a NextJS course and I am interested in using Typescript. While browsing through a GitHub discussion forum, I came across an issue that I don't quite understand. The first function provided below seems to be throwing an error, while the second one is not.
export async function getStaticProps(): GetStaticProps {
return {
props: {
example: ""
}
}
}
The error message for the aforementioned function is as follows:
The return type of an async function or method must be the global Promise type. Did you mean to write 'Promise<GetStaticProps<{ [key: string]: any; }, ParsedUrlQuery, PreviewData>>'?
export const getStaticProps: GetStaticProps = async () => {
return {
props: {
example: ""
}
}
};
Interestingly, the error does not occur for the second function. This discrepancy has left me puzzled. Even though both functions have similar definitions, with one being a regular function and the other an arrow function, why does only one trigger an error?
If anyone could shed some light on how I can resolve this issue with the appropriate TypeScript types in the first function, it would be greatly appreciated. I'd like to better understand what's causing this disparity.