Next.js中的AppProps是什么？_app.tsx相关类型定义疑问

AppProps 是Next.js 内置的TypeScript类型，从next/app包导出，专门用来对自定义_app.tsx中的根App组件做入参类型约束。

它默认包含两个核心属性：

• Component：React 组件类型，对应当前路由匹配到的页面级组件，比如访问 /dashboard 路径时，该值就是pages/dashboard.tsx文件导出的组件。
• pageProps：对象类型，存储当前页面通过getStaticProps、getServerSideProps、getInitialProps等服务端/静态生成方法预获取的所有数据，需要透传给Component才能让页面组件拿到对应的预加载数据。

如果你的项目有自定义的全局页面属性，还可以通过泛型扩展AppProps的类型，示例如下：

// 自定义页面公共属性类型
type CustomPageProps = {
  globalConfig: Record<string, any>
}

// 给AppProps传入泛型约束pageProps的类型
function MyApp({ Component, pageProps }: AppProps<CustomPageProps>) {
  // 这里pageProps就会带上globalConfig的类型提示
  return <Component {...pageProps} />
}

你贴的代码就是_app.tsx的默认最简实现，直接把匹配到的页面组件和对应的预加载属性渲染出来即可。

内容的提问来源于stack exchange，提问作者abu abu