Next.jsを関数宣言で書き直したい

Question

Next.jsではデフォルトで以下のように関数式で書かれていますが、

const Home: NextPage = () => {
  return <h1>hoge</h1>;
};

export default Home;

これを以下のように関数宣言で書き直すと、

export default function Home(): NextPage {
  return <h1>hoge</h1>;
};

以下のようなエラーが発生します。

型 'Element' を型 'NextPage<{}, {}>' に割り当てることはできません。
型 'ReactElement<any, any>' を型 'FunctionComponent<{}> & { getInitialProps?(context: NextPageContext): {} | Promise<{}>; }' に割り当てることはできません。
型 'ReactElement<any, any>' を型 'FunctionComponent<{}>' に割り当てることはできません。
型 'ReactElement<any, any>' にはシグネチャ '(props: { children?: ReactNode; }, context?: any): ReactElement<any, any> | null' に一致するものがありません。ts(2322)

恥ずかしながらエラーを読んでも全然意味が分からないのですし、そもそもどちらも同じ書き方なはずなのに、なぜ関数宣言で書き直すとこのようなエラーが発生するのでしょうか？

よろしければご回答宜しくお願い致します????

Answer 1

そもそもどちらも同じ書き方なはずなのに

違います。function Home(): NextPageと書くと、「NextPageを返す関数」という意味になります。