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

user_10524046 0
Viewed 2794

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.

react-tsx tsx typescript next.js reactjs
1 Answers

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
user_105240460
Related