0d5a692d0e
The 'with-static-export' example is very useful but, if a developer wants to use TypeScript, converting it is nontrivial. There are some gotchas in the GetStaticProps/GetStaticPaths functions. This example should help jumpstart TS development for sites static generation. ## Documentation / Examples - [x] Make sure the linting passes by running `pnpm lint` - [x] The examples guidelines are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples) Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
37 lines
816 B
TypeScript
37 lines
816 B
TypeScript
import Head from 'next/head'
|
|
import { GetStaticProps, NextPage } from 'next'
|
|
import Post from '../components/post'
|
|
import { PostData, PostDataListProps } from '../types/postdata'
|
|
import { GetPosts } from '../lib/postdata_api'
|
|
|
|
export const getStaticProps: GetStaticProps = async (_context) => {
|
|
// fetch list of posts
|
|
const posts: PostData[] = await GetPosts()
|
|
return {
|
|
props: {
|
|
postDataList: posts,
|
|
},
|
|
}
|
|
}
|
|
|
|
const IndexPage: NextPage<PostDataListProps> = ({
|
|
postDataList,
|
|
}: PostDataListProps) => {
|
|
return (
|
|
<main>
|
|
<Head>
|
|
<title>Home page</title>
|
|
</Head>
|
|
|
|
<h1>List of posts</h1>
|
|
|
|
<section>
|
|
{postDataList.map((post: PostData) => (
|
|
<Post {...post} key={post.id} />
|
|
))}
|
|
</section>
|
|
</main>
|
|
)
|
|
}
|
|
|
|
export default IndexPage
|