reactjstypescriptnext.jstsxreact-tsx

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


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: enter image description here

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.


Solution

  • 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