Just following some basic guides and got issues already. I can't see the problem with the below code but i'm getting the error:
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of
Navbar.
Can someone point where i'm going wrong please? Will use server side rendering some point but for now i'm just trying to get the design and layout done.
// _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 Navbar
correct your Link import
import Link from "next/link";