Hello everyone! I recently started working with Next.js and TypeScript. Currently, I'm attempting to use the map() function on data fetched from JsonPlaceholder API.
Here is my implementation for getStaticProps:
export const getStaticProps: GetStaticProps = async () => {
const res = await fetch(`https://jsonplaceholder.typicode.com/users`)
const data = await res.json()
return {
props: { auth0Data: data },
}
}
This is how I defined my NextPage component:
interface Auth0DataProps {
id: number,
name: string,
username: string,
}
type Props = {
auth0Data: Auth0DataProps
}
const Dashboard: NextPage<{ auth0Data: Props }> = ({ auth0Data }) => {
console.log(auth0Data) // outputs the data as an object
return (
<LayoutComponent title="User profile">
{auth0Data.map(data=> ( // This line throws an error
...
)
)
}
The error I encountered is:
Property 'map' does not exist on type 'Props'