Next.jsのapp.tsxでLayout component読み込んだ際のエラー対応メモ

Next.jsのapp.tsxのエラー対応メモ

以下のようにapp.tsxでヘッダやフッタを表示するLayoutコンポーネントを読み込む実装をしたらVSCode上でエラーが出た。

next devでは動くけど、next buildはできない状態

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <Provider store={store}>
      <Layout>
        <Component {...pageProps} />
      </Layout>
    </Provider>
  )
}

type Props = {
  children?: ReactNode[]
}

const Layout = ({ children, ...props }: Props): JSX.Element => {
}

エラーの内容

Type 'ReactElement<any, any>' is missing the following properties from type 'ReactNode[]': length, pop, push, concat, and 29 more.ts(2740)
Layout.tsx(29, 3): The expected type comes from property 'children' which is declared here on type 'IntrinsicAttributes & Props'

解決方法

Layout.tsxのchildrenの型を直す

type Props = {
  children?: JSX.Element[] | JSX.Element
}