diff --git a/docs/api-reference/data-fetching/get-server-side-props.md b/docs/api-reference/data-fetching/get-server-side-props.md index 2a8a0ff48061f..d57e6a9a8a4e9 100644 --- a/docs/api-reference/data-fetching/get-server-side-props.md +++ b/docs/api-reference/data-fetching/get-server-side-props.md @@ -104,18 +104,53 @@ export async function getServerSideProps(context) { ### getServerSideProps with TypeScript -For TypeScript, you can use the `GetServerSideProps` type from `next`: +The type of `getServerSideProps` can be specified using `GetServerSideProps` from `next`: ```ts import { GetServerSideProps } from 'next' -export const getServerSideProps: GetServerSideProps = async (context) => { - // ... +type Data = { ... } + +export const getServerSideProps: GetServerSideProps<{ data: Data }> = async (context) => { + const res = await fetch('https://.../data') + const data: Data = await res.json() + + return { + props: { + data, + }, + } } ``` If you want to get inferred typings for your props, you can use `InferGetServerSidePropsType`: +```tsx +import { InferGetServerSidePropsType } from 'next' +import { GetServerSideProps } from 'next' + +type Data = { ... } + +export const getServerSideProps: GetServerSideProps<{ data: Data }> = async () => { + const res = await fetch('https://.../data') + const data: Data = await res.json() + + return { + props: { + data, + }, + } +} + +function Page({ data }: InferGetServerSidePropsType) { + // will resolve data to type Data +} + +export default Page +``` + +Implicit typing for `getServerSideProps` will also work properly: + ```tsx import { InferGetServerSidePropsType } from 'next' @@ -133,7 +168,7 @@ export const getServerSideProps = async () => { } function Page({ data }: InferGetServerSidePropsType) { - // will resolve posts to type Data + // will resolve data to type Data } export default Page diff --git a/docs/api-reference/data-fetching/get-static-props.md b/docs/api-reference/data-fetching/get-static-props.md index 6500ab46f07d3..22de01ccaddd2 100644 --- a/docs/api-reference/data-fetching/get-static-props.md +++ b/docs/api-reference/data-fetching/get-static-props.md @@ -202,18 +202,61 @@ export default Blog ## getStaticProps with TypeScript -You can use the `GetStaticProps` type from `next` to type the function: +The type of `getStaticProps` can be specified using `GetStaticProps` from `next`: ```ts import { GetStaticProps } from 'next' -export const getStaticProps: GetStaticProps = async (context) => { - // ... +type Post = { + author: string + content: string +} + +export const getStaticProps: GetStaticProps<{ posts: Post[] }> = async ( + context +) => { + const res = await fetch('https://.../posts') + const posts: Post[] = await res.json() + + return { + props: { + posts, + }, + } } ``` If you want to get inferred typings for your props, you can use `InferGetStaticPropsType`: +```tsx +import { InferGetStaticPropsType } from 'next' +import { GetStaticProps } from 'next' + +type Post = { + author: string + content: string +} + +export const getStaticProps: GetStaticProps<{ posts: Post[] }> = async () => { + const res = await fetch('https://.../posts') + const posts: Post[] = await res.json() + + return { + props: { + posts, + }, + } +} + +function Blog({ posts }: InferGetStaticPropsType) { + // will resolve posts to type Post[] +} + +export default Blog +``` + +Implicit typing for `getStaticProps` will also work properly: + ```tsx import { InferGetStaticPropsType } from 'next'