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 }