3943b20f55
## Problem
Currently the Next.js infer utility (`InferGetServerSidePropsType` and
`InferGetStaticPropsType`) types can lead to a wrong inferred types
(`never`). This happens if these functions return something different
than: `{props: {}}`.
**Example:** `getServerSideProps`
```typescript
export async function getServerSideProps({ query }: GetServerSidePropsContext) {
if (query.foo) {
return {
notFound: true,
}
}
return {
props: {
foo: "bar"
},
}
}
type PageProps = InferGetServerSidePropsType<typeof getServerSideProps>
// => type PageProps = never
```
**Example:** `getStaticProps`
```typescript
import type { InferGetStaticPropsType, GetStaticPropsContext } from 'next'
export async function getStaticProps(context: GetStaticPropsContext) {
if (context.params?.bar) {
return {
notFound: true,
}
}
return {
props: {
foo: 'bar',
},
}
}
type PageProps = InferGetStaticPropsType<typeof getStaticProps>
// => type PageProps = never
```
This is because the first infer condition of the utility type is not
satified leading to a never result.
```typescript
export type InferGetServerSidePropsType<T> = T extends GetServerSideProps<
infer P, // <- NOT SATISFIED
any
>
? P
: T extends (
context?: GetServerSidePropsContext<any>
) => Promise<GetServerSidePropsResult<infer P>>
? P
: never // <- NOT SATISFIED
```
## Solution
I have experimented with different solutions ending with a much simpler
type, that is faster to execute, easier to read and universally usable
for both prop variations.
```typescript
/**
* Flow:
* - Make sure getStaticProps is a function
* - Get its return type
* - Extract the one that contains {props: any}
* - Return the props
*/
export type InferGetStaticPropsType<T extends (args: any) => any> = Extract<
Awaited<ReturnType<T>>,
{ props: any }
>['props']
```
## Bug
- [x] Related issues: fixes #36615, #15913,
https://twitter.com/leeerob/status/1563540593003106306
- [x] Type tests added
## Future thoughts
Since `InferGetStaticPropsType` and `InferGetServerSidePropsType` are
now the same, it's api could be merged into one utility type (e.g:
InferNextProps). I recommend doing this in a different PR.
## Additional info
I have tested this approach using the following [external
package](https://www.npmjs.com/package/infer-next-props-type)
(@timneutkens sorry for the late PR). Since about 12 Month I haven't
received any negative feedback (issues) regarding this approach.
Co-authored-by: JJ Kasper <jj@jjsweb.site>
|
||
|---|---|---|
| .. | ||
| bin | ||
| build | ||
| bundles | ||
| cli | ||
| client | ||
| compiled | ||
| export | ||
| future | ||
| image-types | ||
| lib | ||
| pages | ||
| server | ||
| shared/lib | ||
| telemetry | ||
| trace | ||
| types | ||
| amp.d.ts | ||
| amp.js | ||
| app.d.ts | ||
| app.js | ||
| babel.d.ts | ||
| babel.js | ||
| client.d.ts | ||
| client.js | ||
| config.d.ts | ||
| config.js | ||
| constants.d.ts | ||
| constants.js | ||
| document.d.ts | ||
| document.js | ||
| dynamic.d.ts | ||
| dynamic.js | ||
| error.d.ts | ||
| error.js | ||
| head.d.ts | ||
| head.js | ||
| image.d.ts | ||
| image.js | ||
| index.d.ts | ||
| jest.d.ts | ||
| jest.js | ||
| license.md | ||
| link.d.ts | ||
| link.js | ||
| package.json | ||
| README.md | ||
| router.d.ts | ||
| router.js | ||
| script.d.ts | ||
| script.js | ||
| server.d.ts | ||
| server.js | ||
| taskfile-ncc.js | ||
| taskfile-swc.js | ||
| taskfile.js | ||
| tsconfig.json | ||
Next.js
Getting Started
Visit https://nextjs.org/learn to get started with Next.js.
Documentation
Visit https://nextjs.org/docs to view the full documentation.
Who is using Next.js?
Next.js is used by the world's leading companies. Check out the Next.js Showcase to learn more.
Community
The Next.js community can be found on GitHub Discussions, where you can ask questions, voice ideas, and share your projects.
To chat with other community members you can join the Next.js Discord.
Our Code of Conduct applies to all Next.js community channels.
Contributing
Please see our contributing.md.
Good First Issues
We have a list of good first issues that contain bugs that have a relatively limited scope. This is a great place to get started, gain experience, and get familiar with our contribution process.
Authors
- Tim Neutkens (@timneutkens)
- Naoyuki Kanezawa (@nkzawa)
- Guillermo Rauch (@rauchg)
- Arunoda Susiripala (@arunoda)
- Tony Kovanen (@tonykovanen)
- Dan Zajdband (@impronunciable)
Security
If you believe you have found a security vulnerability in Next.js, we encourage you to responsibly disclose this and not open a public issue. We will investigate all legitimate reports. Email security@vercel.com to disclose any security vulnerabilities.