rsnext/packages/next/pages/_app.tsx
Balázs Orbán 6eefc9de56
fix(ts): relax AppProps to not require generic (#41264)
It seems that #38867 made `AppProps` always require the `pageProps`
object shape to be passed as a generic since the default `{}` will throw
a TS error if you try accessing any property:

Before:

![image](https://user-images.githubusercontent.com/18369201/194639573-aa8a97f8-2c6a-413c-96f2-5e99e4a17c66.png)

After:

![image](https://user-images.githubusercontent.com/18369201/194639630-03d1a669-722f-4822-b0db-3b8dd88b2959.png)


Technically, it would be more correct since accessing `pageProps`
properties would otherwise be unsafe, but this seems to break the
current behavior.

## Bug

- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have a helpful link attached, see `contributing.md`

## Feature

- [ ] Implements an existing feature request or RFC. Make sure the
feature request has been accepted for implementation before opening a
PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have a helpful link attached, see `contributing.md`

## Documentation / Examples

- [ ] Make sure the linting passes by running `pnpm lint`
- [ ] The "examples guidelines" are followed from [our contributing
doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md)
2022-10-07 14:59:32 -07:00

46 lines
1.2 KiB
TypeScript

import React from 'react'
import type {
AppContextType,
AppInitialProps,
AppPropsType,
NextWebVitalsMetric,
AppType,
} from '../shared/lib/utils'
import type { Router } from '../client/router'
import { loadGetInitialProps } from '../shared/lib/utils'
export { AppInitialProps, AppType }
export { NextWebVitalsMetric }
export type AppContext = AppContextType<Router>
export type AppProps<P = any> = AppPropsType<Router, P>
/**
* `App` component is used for initialize of pages. It allows for overwriting and full control of the `page` initialization.
* This allows for keeping state between navigation, custom error handling, injecting additional data.
*/
async function appGetInitialProps({
Component,
ctx,
}: AppContext): Promise<AppInitialProps> {
const pageProps = await loadGetInitialProps(Component, ctx)
return { pageProps }
}
export default class App<P = any, CP = {}, S = {}> extends React.Component<
P & AppProps<CP>,
S
> {
static origGetInitialProps = appGetInitialProps
static getInitialProps = appGetInitialProps
render() {
const { Component, pageProps } = this.props as AppProps<CP>
return <Component {...pageProps} />
}
}