I am starting to use typescript with next.js
const Index: NextPage = (props) => {
return (<p>{prop.data.name}</p>);
}
export default Index;
export const getServerSideProps = async () => {
const data = await fetch(
`${server}/api`
).then((response) => response.json());
return {
props: {data}
};
};
my editor highlight the word data in {props.data.name} with this message
Property 'data' does not exist on type '{ children?: ReactNode; }'.
how can I define a type from this?
>Solution :
You need to define a type and pass it to the generic param of NextPage like below
type PictureType = {
category: string,
createdAt: string,
favourites: number,
isHidden: boolean,
title: string,
updatedAt: string,
url: string,
user: string,
}
type ResponseDataType = {
lastPictures: PictureType[],
picturesByCat: PictureType[]
}
type PageProps = {
data: ResponseDataType,
}
const Index: NextPage<PageProps> = (props) => {
return (<p>{prop.data.name}</p>);
}
export default Index;
export const getServerSideProps = async () => {
const data = await fetch(
`${server}/api`
).then((response) => response.json());
return {
props: {data}
};
};