Este es el código para el diseño.
import type { NextPage } from 'next' import React from 'react' interface LayoutProps { children: React.ReactNode; } const Layout: NextPage = ({ children }: LayoutProps) => { return ( <> <div> <main> {children} </main> </div> </> ); }; export default LayoutEl error aparece cuando paso el cursor sobre el inicio del elemento de diseño en este bloque de código, que es la parte principal de la aplicación.
import type { AppProps } from 'next/app' import Layout from '../components/Layout' import '../styles/globals.css' function MyApp({ Component, pageProps }: AppProps) { return ( <Layout> <Component {...pageProps} /> </Layout> ) } export default MyAppAl principio pensé que era porque no tenía el tipo correcto para los niños, pero hice un tipo para los niños, pero hice una interfaz para eso, pero sigo recibiendo el error.
Prueba con genéricos
import type { NextPage } from 'next' import React from 'react' interface LayoutProps { children: React.ReactNode; } const Layout: NextPage<LayoutProps> = ({ children }) => { return ( <> <div> <main> {children} </main> </div> </> ); }; export default Layout