Type error when using function with the return type NextPage

Question

So the following code works:

const HomePage: NextPage = () => (
  <div>
    <div>HomePage</div>
  </div>
);

However I would like to comply with the Airbnb's style guide, which in this case requires you to use a named function, arriving at this code:

function HomePage(): NextPage {
  return (
    <div>
      <div>HomePage</div>
    </div>
  )
}

However the compiler gives the following error to the code above:

Type 'Element' is not assignable to type 'NextPage<{}, {}>'.
  Type 'ReactElement<any, any>' is not assignable to type 'FunctionComponent<{}> & { getInitialProps?(context: NextPageContext): {} | Promise<{}>; }'.
    Type 'ReactElement<any, any>' is not assignable to type 'FunctionComponent<{}>'.
      Type 'ReactElement<any, any>' provides no match for the signature '(props: { children?: ReactNode; }, context?: any): ReactElement<any, any> | null'.ts(2322)

I can bypass the error by either not specifying the type, or by casting the return to as unknown as NextPage, both of which look like workarounds rather than a correct solution.

What is the correct way of using named functions in this case?

Answer 1

Those two code blocks are not exactly the same.

In the first one, you're correctly using NextPage to type the variable HomePage which is a function.

In the second one, you're incorrectly using NextPage to type HomePage's return value (which is not the same as the function itself).

You can type HomePage's return value in several ways, using JSX.Element, React.ReactElement or React.ReactNode.

function HomePage(): JSX.Element {
  return (
    <div>
      <div>HomePage</div>
    </div>
  )
}

---

Note that there's nothing wrong in typing the function as you are in the first code block, and is actually the recommended way in Next.js. It provides typings for both the component's props and return value.