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.

score 25 · Accepted Answer · answered Jun 09 '21 at 17:18

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

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

1 Answers1