(Docs) getStaticProps & getServerSideProps TS section (vercel#40607) (v…

…ercel#40639)

Added examples to `getStaticProps` & `getServerSideProps` explicit and implicit typings for TypeScript.

Related issues: fixes vercel#40607

Co-authored-by: Balázs Orbán <18369201+balazsorban44@users.noreply.github.com>

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<typeof getServerSideProps>`:
 
+```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<typeof getServerSideProps>) {
+  // 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<typeof getServerSideProps>) {
-  // will resolve posts to type Data
+  // will resolve data to type Data
 }
 
 export default Page

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<typeof getStaticProps>`:
 
+```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<typeof getStaticProps>) {
+  // will resolve posts to type Post[]
+}
+
+export default Blog
+```
+
+Implicit typing for `getStaticProps` will also work properly:
+
 ```tsx
 import { InferGetStaticPropsType } from 'next'