From 14f999cb133b61ffb990a68e9360bf09c6ba3e59 Mon Sep 17 00:00:00 2001 From: sic!kh <88524276+sicikh@users.noreply.github.com> Date: Sun, 18 Sep 2022 00:25:00 +0700 Subject: [PATCH 1/3] (Docs) Improved getStaticProps with TS section --- .../data-fetching/get-static-props.md | 49 +++++++++++++++++-- 1 file changed, 46 insertions(+), 3 deletions(-) diff --git a/docs/api-reference/data-fetching/get-static-props.md b/docs/api-reference/data-fetching/get-static-props.md index 6500ab46f07d3..138bed88aae5b 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: +To specify type of `getStaticProps` explicitly, you can use `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' From 07302d4807e0faf019d46f75f63c03ee8f1c36ce Mon Sep 17 00:00:00 2001 From: sic!kh <88524276+sicikh@users.noreply.github.com> Date: Sun, 18 Sep 2022 00:32:32 +0700 Subject: [PATCH 2/3] (Docs) Improved getServerSideProps with TS section --- .../data-fetching/get-server-side-props.md | 43 +++++++++++++++++-- 1 file changed, 39 insertions(+), 4 deletions(-) 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..5031d7a1240c3 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`: +To specify type of `getServerSideProps` explicitly, you can use `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 From a856e04f3b44788dfe13402f77c16dbf0d65eb00 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bal=C3=A1zs=20Orb=C3=A1n?= Date: Sat, 1 Oct 2022 06:14:53 +0200 Subject: [PATCH 3/3] Apply suggestions from code review --- docs/api-reference/data-fetching/get-server-side-props.md | 2 +- docs/api-reference/data-fetching/get-static-props.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) 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 5031d7a1240c3..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,7 +104,7 @@ export async function getServerSideProps(context) { ### getServerSideProps with TypeScript -To specify type of `getServerSideProps` explicitly, you can use `GetServerSideProps` from `next`: +The type of `getServerSideProps` can be specified using `GetServerSideProps` from `next`: ```ts import { GetServerSideProps } from 'next' diff --git a/docs/api-reference/data-fetching/get-static-props.md b/docs/api-reference/data-fetching/get-static-props.md index 138bed88aae5b..22de01ccaddd2 100644 --- a/docs/api-reference/data-fetching/get-static-props.md +++ b/docs/api-reference/data-fetching/get-static-props.md @@ -202,7 +202,7 @@ export default Blog ## getStaticProps with TypeScript -To specify type of `getStaticProps` explicitly, you can use `GetStaticProps` from `next`: +The type of `getStaticProps` can be specified using `GetStaticProps` from `next`: ```ts import { GetStaticProps } from 'next'