Currently, I am grappling with utilizing getStaticProps along with TypeScript. Initially, I attempted to achieve this using a function declaration:
import { Movie } from './movies/movie'
import { GetStaticProps } from 'next'
export async function getStaticProps(): GetStaticProps {
const res = await fetch('https://my-json-server.typicode.com/horizon-code-academy/fake-movies-api/movies');
const movies: Movie[] = await res.json()
return {
props: { movies }
};
}
However, while doing so, an error arose stating: Type '{ props: { movies: Movie[]; };' is not assignable to type 'GetStaticProps'
I experimented with alternative types such as
GetStaticProps<{ movies: Movie[] } >Promise<GetStaticProps<{ movies: Movie[] } >>export const getStaticProps: GetStaticProps = async () => {
const res = await fetch('https://my-json-server.typicode.com/horizon-code-academy/fake-movies-api/movies');
const movies: Movie[] = await res.json()
return {
props: { movies }
};
}
Regrettably, my attempt to use arrow functions was unsuccessful, as I encountered the error: "getStaticProps" is not a valid Next.js entry export value.
If you have any insightful suggestions or solutions, they would be greatly appreciated!