Skip to content

Instantly share code, notes, and snippets.

@csdear
Created July 18, 2022 14:40
Show Gist options
  • Save csdear/c2845c146928b46be3a294ed1e68df8b to your computer and use it in GitHub Desktop.
Save csdear/c2845c146928b46be3a294ed1e68df8b to your computer and use it in GitHub Desktop.
getStaticProps Typescript
import Link from 'next/link';
import { InferGetStaticPropsType, GetStaticProps } from "next";
import { FC, useState, useEffect } from 'react';
interface PeopleData {
name: string;
website: string;
email: string;
}
export const getStaticProps = async () => {
const people: PeopleData[] = await (
await fetch('https://jsonplaceholder.typicode.com/users')
).json();
return {
props: {
people
},
};
};
const People: FC = ({ people }: InferGetStaticPropsType<typeof getStaticProps>) => {
return (
<div>
{people.map((person, i) => (
<div key={i}>
<h1>{person.name}</h1>
<h2>Website: {person.website}</h2>
<code>Email: {person.email}</code>
</div>
))}
<h2>
<Link href="/">
<a>Back to home</a>
</Link>
</h2>
</div>
);
};
export default People;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment