Global layout
Render every Pages Router page through a custom application shell.
Next.js 16+ · Type Alias
AppProps
AppProps types the props received by a custom Pages Router App. It supplies the active page component and its page props so the App can render shared layouts or initialization logic.
How it works
AppProps is the TypeScript shape used by a custom App component in the Pages Router. It provides the active page component through Component and that page's data through pageProps, which the custom App can render or use for shared initialization and layout behavior.
Syntax
type AppProps = { Component: NextPage; pageProps: object }Parameters
| Name | Type | Description |
|---|---|---|
Component | NextPage | The currently active page component rendered by the custom App. |
pageProps | object | Props supplied to the active page component. |
Returns
A React element containing the active page component and its pageProps.
Key points
- The custom App component initializes Pages Router pages.
- A custom App can provide a layout that persists while users navigate between pages.
- The App component can inject extra data into rendered pages.
- Component identifies the currently active page component.
- Props spread into Component become props received by the active page.
Common mistakes
- A custom App cannot use page data-fetching methods such as getStaticProps or getServerSideProps.
- Adding getInitialProps to the custom App disables automatic static optimization for pages that do not define getStaticProps.
Example: Typing a custom App
import type { AppProps } from 'next/app'
export default function MyApp({ Component, pageProps }: AppProps) {
return <Component {...pageProps} />
}Types a custom Pages Router App that renders the active page with its supplied props.
When to use it
Page initialization
Apply initialization behavior shared by all Pages Router pages.
Data injection
Pass shared or computed values to the active page.
Related
Custom AppNextPagegetInitialPropsgetStaticPropsgetServerSideProps