Next.jsの_app.tsxをTypeScriptで書く

このページではNext.jsの_app.tsxをTypeScriptで書くことを目的にします。
基本的にconstのあとの型は基本的にどのファイルでもReact.FCの型を使います。
Reactで必ず書く「import React from 'react'」 の記述は2021.8/25時点ではNext.jsでは必要なく省略できます。

• AppPropsの型(_app.tsxのみ)
• JSX.Elementの型(明示的に指定するのは_app.tsxのみ)
• React.FCの型(すべての.tsxに必要)

参考
*Next.jsでTypeScriptを導入する手順
*_app.tsx内のMyAppの型定義でエラーが出る

_app.tsx

import {AppProps} from 'next/app'
import Layout from '../components/layout'
import '../styles/globals.css'

const MyApp: React.FC<AppProps> = ({ Component, pageProps }): JSX.Element => {
  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  );
}
export default MyApp;

Layout.tsxの中にHeader, Metatext当の全てのパーツを内包し、
このpageProps部分をLayoutタグで囲んであげることで全てのページにLayoutタグを記述する必要がなくなります。
またLayoutをネストする場合getLayout関数を使うことによって実装できます。

SSGを使うに当たって.
静的,静かなというコンセプトを崩してはいけないのかと思います。

10月29日追記
React.FCはchildrenにReactNodeを渡したくない場合VFCを使うといいみたいです。
使われなくなってきてるとはいえ型推論させないで明示的に定義した方がコンパイルが速いみたいなので現在はそうしています。