diff --git a/docs/02-app/01-building-your-application/07-configuring/01-typescript.mdx b/docs/02-app/01-building-your-application/07-configuring/01-typescript.mdx
index 04bb155acfca6..048ea88187827 100644
--- a/docs/02-app/01-building-your-application/07-configuring/01-typescript.mdx
+++ b/docs/02-app/01-building-your-application/07-configuring/01-typescript.mdx
@@ -177,19 +177,21 @@ For [`getStaticProps`](/docs/pages/api-reference/functions/get-static-props), [`
 ```tsx filename="pages/blog/[slug].tsx"
 import { GetStaticProps, GetStaticPaths, GetServerSideProps } from 'next'
 
-export const getStaticProps: GetStaticProps = async (context) => {
+export const getStaticProps = (async (context) => {
   // ...
-}
+}) satisfies GetStaticProps
 
-export const getStaticPaths: GetStaticPaths = async () => {
+export const getStaticPaths = (async () => {
   // ...
-}
+}) satisfies GetStaticPaths
 
-export const getServerSideProps: GetServerSideProps = async (context) => {
+export const getServerSideProps = (async (context) => {
   // ...
-}
+}) satisfies GetServerSideProps
 ```
 
+> **Good to know:** `satisfies` was added to TypeScript in [4.9](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4-9.html). We recommend upgrading to the latest version of TypeScript.
+
 ## API Routes
 
 The following is an example of how to use the built-in types for API routes:
diff --git a/docs/03-pages/01-building-your-application/03-data-fetching/01-get-static-props.mdx b/docs/03-pages/01-building-your-application/03-data-fetching/01-get-static-props.mdx
index 397c0fa880b96..6dcc6d6095694 100644
--- a/docs/03-pages/01-building-your-application/03-data-fetching/01-get-static-props.mdx
+++ b/docs/03-pages/01-building-your-application/03-data-fetching/01-get-static-props.mdx
@@ -13,13 +13,13 @@ type Repo = {
   stargazers_count: number
 }
 
-export const getStaticProps: GetStaticProps<{
-  repo: Repo
-}> = async () => {
+export const getStaticProps = (async (context) => {
   const res = await fetch('https://api.github.com/repos/vercel/next.js')
   const repo = await res.json()
   return { props: { repo } }
-}
+}) satisfies GetStaticProps<{
+  repo: Repo
+}>
 
 export default function Page({
   repo,
@@ -29,7 +29,7 @@ export default function Page({
 ```
 
 ```jsx filename="pages/index.js" switcher
-export const getStaticProps = async () => {
+export async function getStaticProps() {
   const res = await fetch('https://api.github.com/repos/vercel/next.js')
   const repo = await res.json()
   return { props: { repo } }
diff --git a/docs/03-pages/01-building-your-application/03-data-fetching/02-get-static-paths.mdx b/docs/03-pages/01-building-your-application/03-data-fetching/02-get-static-paths.mdx
index a0cc9ba9a9266..785682a4da9ea 100644
--- a/docs/03-pages/01-building-your-application/03-data-fetching/02-get-static-paths.mdx
+++ b/docs/03-pages/01-building-your-application/03-data-fetching/02-get-static-paths.mdx
@@ -19,7 +19,7 @@ type Repo = {
   stargazers_count: number
 }
 
-export const getStaticPaths: GetStaticPaths = async () => {
+export const getStaticPaths = (async () => {
   return {
     paths: [
       {
@@ -30,15 +30,15 @@ export const getStaticPaths: GetStaticPaths = async () => {
     ],
     fallback: true, // false or "blocking"
   }
-}
+}) satisfies getStaticPaths
 
-export const getStaticProps: GetStaticProps<{
-  repo: Repo
-}> = async () => {
+export const getStaticProps = (async (context) => {
   const res = await fetch('https://api.github.com/repos/vercel/next.js')
   const repo = await res.json()
   return { props: { repo } }
-}
+}) satisfies GetStaticProps<{
+  repo: Repo
+}>
 
 export default function Page({
   repo,
@@ -48,7 +48,7 @@ export default function Page({
 ```
 
 ```jsx filename="pages/repo/[name].js" switcher
-export const getStaticPaths = async () => {
+export async function getStaticPaths() {
   return {
     paths: [
       {
@@ -61,7 +61,7 @@ export const getStaticPaths = async () => {
   }
 }
 
-export const getStaticProps = async () => {
+export async function getStaticProps() {
   const res = await fetch('https://api.github.com/repos/vercel/next.js')
   const repo = await res.json()
   return { props: { repo } }
diff --git a/docs/03-pages/01-building-your-application/03-data-fetching/03-get-server-side-props.mdx b/docs/03-pages/01-building-your-application/03-data-fetching/03-get-server-side-props.mdx
index 85e42822b79ff..d252b4f1fc07d 100644
--- a/docs/03-pages/01-building-your-application/03-data-fetching/03-get-server-side-props.mdx
+++ b/docs/03-pages/01-building-your-application/03-data-fetching/03-get-server-side-props.mdx
@@ -13,13 +13,13 @@ type Repo = {
   stargazers_count: number
 }
 
-export const getServerSideProps: GetServerSideProps<{
-  repo: Repo
-}> = async () => {
+export const getServerSideProps = (async (context) => {
   const res = await fetch('https://api.github.com/repos/vercel/next.js')
   const repo = await res.json()
   return { props: { repo } }
-}
+}) satisfies GetServerSideProps<{
+  repo: Repo
+}>
 
 export default function Page({
   repo,
@@ -29,7 +29,7 @@ export default function Page({
 ```
 
 ```jsx filename="pages/index.js" switcher
-export const getServerSideProps = async () => {
+export async function getServerSideProps() {
   const res = await fetch('https://api.github.com/repos/vercel/next.js')
   const repo = await res.json()
   return { props: { repo } }
@@ -99,10 +99,6 @@ This approach works well for user dashboard pages, for example. Because a dashbo
 The following example shows how to fetch data at request time and pre-render the result.
 
 ```jsx
-function Page({ data }) {
-  // Render data...
-}
-
 // This gets called on every request
 export async function getServerSideProps() {
   // Fetch data from external API
@@ -113,7 +109,9 @@ export async function getServerSideProps() {
   return { props: { data } }
 }
 
-export default Page
+export default function Page({ data }) {
+  // Render data...
+}
 ```
 
 ## Caching with Server-Side Rendering (SSR)
diff --git a/docs/03-pages/02-api-reference/02-functions/get-server-side-props.mdx b/docs/03-pages/02-api-reference/02-functions/get-server-side-props.mdx
index 2f04033ed9f01..0e83ebafaf34a 100644
--- a/docs/03-pages/02-api-reference/02-functions/get-server-side-props.mdx
+++ b/docs/03-pages/02-api-reference/02-functions/get-server-side-props.mdx
@@ -13,13 +13,13 @@ type Repo = {
   stargazers_count: number
 }
 
-export const getServerSideProps: GetServerSideProps<{
-  repo: Repo
-}> = async () => {
+export const getServerSideProps = (async (context) => {
   const res = await fetch('https://api.github.com/repos/vercel/next.js')
   const repo = await res.json()
   return { props: { repo } }
-}
+}) satisfies GetServerSideProps<{
+  repo: Repo
+}>
 
 export default function Page({
   repo,
@@ -29,7 +29,7 @@ export default function Page({
 ```
 
 ```jsx filename="pages/index.js" switcher
-export const getServerSideProps = async () => {
+export async function getServerSideProps() {
   const res = await fetch('https://api.github.com/repos/vercel/next.js')
   const repo = await res.json()
   return { props: { repo } }
diff --git a/docs/03-pages/02-api-reference/02-functions/get-static-paths.mdx b/docs/03-pages/02-api-reference/02-functions/get-static-paths.mdx
index 5ad19d36e4298..ae60b5cab4b49 100644
--- a/docs/03-pages/02-api-reference/02-functions/get-static-paths.mdx
+++ b/docs/03-pages/02-api-reference/02-functions/get-static-paths.mdx
@@ -17,7 +17,7 @@ type Repo = {
   stargazers_count: number
 }
 
-export const getStaticPaths: GetStaticPaths = async () => {
+export const getStaticPaths = (async () => {
   return {
     paths: [
       {
@@ -28,15 +28,15 @@ export const getStaticPaths: GetStaticPaths = async () => {
     ],
     fallback: true, // false or "blocking"
   }
-}
+}) satisfies getStaticPaths
 
-export const getStaticProps: GetStaticProps<{
-  repo: Repo
-}> = async () => {
+export const getStaticProps = (async (context) => {
   const res = await fetch('https://api.github.com/repos/vercel/next.js')
   const repo = await res.json()
   return { props: { repo } }
-}
+}) satisfies GetStaticProps<{
+  repo: Repo
+}>
 
 export default function Page({
   repo,
@@ -46,7 +46,7 @@ export default function Page({
 ```
 
 ```jsx filename="pages/repo/[name].js" switcher
-export const getStaticPaths = async () => {
+export async function getStaticPaths() {
   return {
     paths: [
       {
@@ -59,7 +59,7 @@ export const getStaticPaths = async () => {
   }
 }
 
-export const getStaticProps = async () => {
+export async function getStaticProps() {
   const res = await fetch('https://api.github.com/repos/vercel/next.js')
   const repo = await res.json()
   return { props: { repo } }
diff --git a/docs/03-pages/02-api-reference/02-functions/get-static-props.mdx b/docs/03-pages/02-api-reference/02-functions/get-static-props.mdx
index 5a45a96970a05..f50ef8fd6c37d 100644
--- a/docs/03-pages/02-api-reference/02-functions/get-static-props.mdx
+++ b/docs/03-pages/02-api-reference/02-functions/get-static-props.mdx
@@ -13,13 +13,13 @@ type Repo = {
   stargazers_count: number
 }
 
-export const getStaticProps: GetStaticProps<{
-  repo: Repo
-}> = async () => {
+export const getStaticProps = (async (context) => {
   const res = await fetch('https://api.github.com/repos/vercel/next.js')
   const repo = await res.json()
   return { props: { repo } }
-}
+}) satisfies GetStaticProps<{
+  repo: Repo
+}>
 
 export default function Page({
   repo,
@@ -29,7 +29,7 @@ export default function Page({
 ```
 
 ```jsx filename="pages/index.js" switcher
-export const getStaticProps = async () => {
+export async function getStaticPaths() {
   const res = await fetch('https://api.github.com/repos/vercel/next.js')
   const repo = await res.json()
   return { props: { repo } }