Nextjs: ts(7031) type error: Binding element 'Component' implicitly has an 'any' type

Question

This is an issue I had when converting a NextJS project to TypeScript. In my _app.tsx, I got a type error: Binding element 'pageProps' implicitly has an 'any' type. ts(7031). The error likely looks like this:

I know that there are existing answers for this somewhere on StackOverflow, but I am writing this so that someone in the future might come across this easier.

Potboy

Answer 1

Edit for 2024: This information is somewhat outdated. It does not apply to the App Directory.

---

The solution to this is simple. NextJS exports a custom type to resolve this issue: AppProps. It can be imported like this:

import { AppProps } from 'next/app';

To apply the type, you can reformat the props from

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

to

function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}

The final product should look like this, assuming an unmodified _app.tsx file:

import { AppProps } from 'next/app';

import '../styles/globals.css'

function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}

export default MyApp

Potboy

I am looking for thsi solution but in my case here is my code after changing it to your answer: import { AppProps } from 'next/app'; export default function ItemsGrid({ items }: AppProps) { return <ul> {items.map(item => <li key={item.id}> <h1>{item.name}</h1> </li>)} </ul> } but I still get this message/warning: Property 'items' does not exist on type 'AppProps'.ts(2339) (parameter) items: any – Upper

This information is designed for the pages directory in Next.js v10. If you're trying to use the app directory, this is not going to help you. – Potboy