Solo siguiendo algunas guías básicas y ya tengo problemas. No puedo ver el problema con el siguiente código, pero recibo el error:
Error: el tipo de elemento no es válido: esperaba una cadena (para componentes integrados) o una clase/función (para componentes compuestos) pero obtuvo: objeto. Compruebe el método de renderizado de
Navbar.
¿Alguien puede señalar dónde me estoy equivocando, por favor? Usaré la representación del lado del servidor en algún momento, pero por ahora solo estoy tratando de hacer el diseño y el diseño.
// _app.tsx import Layout from '../components/Layout' import '../styles/globals.css'; import type { AppProps } from 'next/app' function MyApp({ Component, pageProps }: AppProps) { return ( <Layout> <Component {...pageProps} /> </Layout> ) } export default MyApp // index.tsx import type {NextPage} from 'next' const Home: NextPage = () => { return ( <div> <h1 className="text-3xl font-bold underline"> Header </h1> </div> ) } export default Home // Layout.jsx import Navbar from './Navbar'; import Head from "next/head"; const Layout = ({children}) => { return ( <> <Navbar /> <div className="bg-background h-full"> <Head> <title>Test</title> </Head> <main> {children} </main> </div> </> ) } export default Layout // Navbar.jsx import Link from "next"; function Navbar() { return ( <nav> <ul> <li> <Link to="/">Home</Link> </li> <li> <Link to="/">About</Link> </li> <li> <Link to="/">Menu</Link> </li> <li> <Link to="/">Gallery</Link> </li> </ul> </nav> ) } export default Navbarcorregir la importación de su enlace
import Link from "next/link";