From 80fba152f2add326a1520ffd2b530d00c75983f6 Mon Sep 17 00:00:00 2001 From: Lee Robinson Date: Sun, 10 Sep 2023 15:16:36 -0500 Subject: [PATCH 1/3] docs: use satisfies for TS code blocks --- .../07-configuring/01-typescript.mdx | 14 ++++++++------ .../03-data-fetching/01-get-static-props.mdx | 10 +++++----- .../03-data-fetching/02-get-static-paths.mdx | 12 ++++++------ .../03-get-server-side-props.mdx | 18 ++++++++---------- .../02-functions/get-server-side-props.mdx | 10 +++++----- .../02-functions/get-static-paths.mdx | 16 ++++++++-------- .../02-functions/get-static-props.mdx | 10 +++++----- 7 files changed, 45 insertions(+), 45 deletions(-) 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..743f5be223cdc 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 async function getStaticProps(context) { // ... -} +} satisfies GetStaticProps -export const getStaticPaths: GetStaticPaths = async () => { +export async function getStaticPaths() { // ... -} +} satisfies GetStaticPaths -export const getServerSideProps: GetServerSideProps = async (context) => { +export async function getServerSideProps(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..eb91684b3f750 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 async function getStaticProps() { 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..94e45a676f5b1 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 () => { 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, 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..4dfd553a11ffd 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 async function getServerSideProps() { 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..0f18b026e7bbf 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 async function getServerSideProps() { 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..2a2010c616a93 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 async function getStaticPaths() { return { paths: [ { @@ -28,15 +28,15 @@ export const getStaticPaths: GetStaticPaths = async () => { ], fallback: true, // false or "blocking" } -} +} as GetStaticPaths -export const getStaticProps: GetStaticProps<{ - repo: Repo -}> = 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 } } -} +} 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..bd2a597c7e32d 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 async function getStaticPaths() { 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 } } From 8fb6b497c3b1f72cd8d24f073b121c937e7ff495 Mon Sep 17 00:00:00 2001 From: Lee Robinson Date: Sun, 10 Sep 2023 15:19:43 -0500 Subject: [PATCH 2/3] One more --- .../03-data-fetching/02-get-static-paths.mdx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) 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 94e45a676f5b1..7ded7c8983552 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 = async () => { +export async function getStaticPaths() { return { paths: [ { @@ -32,7 +32,7 @@ export const getStaticPaths = async () => { } } satisfies GetStaticPaths -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 } } @@ -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 } } From ab092c28d15d57a5b9d89095d99ff3e3835a894d Mon Sep 17 00:00:00 2001 From: Lee Robinson Date: Sun, 10 Sep 2023 20:17:51 -0500 Subject: [PATCH 3/3] Update --- .../07-configuring/01-typescript.mdx | 12 ++++++------ .../03-data-fetching/01-get-static-props.mdx | 4 ++-- .../03-data-fetching/02-get-static-paths.mdx | 8 ++++---- .../03-data-fetching/03-get-server-side-props.mdx | 4 ++-- .../02-functions/get-server-side-props.mdx | 4 ++-- .../02-functions/get-static-paths.mdx | 8 ++++---- .../02-functions/get-static-props.mdx | 4 ++-- 7 files changed, 22 insertions(+), 22 deletions(-) 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 743f5be223cdc..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,17 +177,17 @@ For [`getStaticProps`](/docs/pages/api-reference/functions/get-static-props), [` ```tsx filename="pages/blog/[slug].tsx" import { GetStaticProps, GetStaticPaths, GetServerSideProps } from 'next' -export async function getStaticProps(context) { +export const getStaticProps = (async (context) => { // ... -} satisfies GetStaticProps +}) satisfies GetStaticProps -export async function getStaticPaths() { +export const getStaticPaths = (async () => { // ... -} satisfies GetStaticPaths +}) satisfies GetStaticPaths -export async function getServerSideProps(context) { +export const getServerSideProps = (async (context) => { // ... -} satisfies GetServerSideProps +}) 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. 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 eb91684b3f750..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,11 +13,11 @@ type Repo = { stargazers_count: number } -export async function getStaticProps() { +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<{ +}) satisfies GetStaticProps<{ repo: 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 7ded7c8983552..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 async function getStaticPaths() { +export const getStaticPaths = (async () => { return { paths: [ { @@ -30,13 +30,13 @@ export async function getStaticPaths() { ], fallback: true, // false or "blocking" } -} satisfies GetStaticPaths +}) satisfies getStaticPaths -export async function getStaticProps() { +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<{ +}) satisfies GetStaticProps<{ repo: 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 4dfd553a11ffd..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,11 +13,11 @@ type Repo = { stargazers_count: number } -export async function getServerSideProps() { +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<{ +}) satisfies GetServerSideProps<{ repo: Repo }> 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 0f18b026e7bbf..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,11 +13,11 @@ type Repo = { stargazers_count: number } -export async function getServerSideProps() { +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<{ +}) satisfies GetServerSideProps<{ repo: 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 2a2010c616a93..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 async function getStaticPaths() { +export const getStaticPaths = (async () => { return { paths: [ { @@ -28,13 +28,13 @@ export async function getStaticPaths() { ], fallback: true, // false or "blocking" } -} as GetStaticPaths +}) satisfies getStaticPaths -export async function getStaticProps() { +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<{ +}) satisfies GetStaticProps<{ repo: 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 bd2a597c7e32d..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,11 +13,11 @@ type Repo = { stargazers_count: number } -export async function getStaticPaths() { +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<{ +}) satisfies GetStaticProps<{ repo: Repo }>