/**I am new to Next js, i am running Nextjs 14, am getting error: Module not found: Can't resolve '@/components/layout/Header' when compiling, i can't tell what's the problem since the component is exported normally. At first it worked fine and rendered the component, where i imported and added before {children} in RootLayout() function. Now it does not work and it does the same with the other component 'Hero.js'
I tried to write the Header code in RootLayout function, inside <body>, before the {children}, still it does not work, where as for now it throws same error to 'Hero' component inside 'app/page.js' file. **/
import Link from 'next/link'; export default function Header(){ return( <header className="flex items-center justify-between"> <Link href={''} className="text-primary font-semibold text-3xl">ST PIZZA</Link> <nav className="flex gap-8 items-center text-gray-500 font-semibold"> <Link href={''}>Home</Link> <Link href={''}>Menu</Link> <Link href={''}>About</Link> <Link href={''}>Contact</Link> </nav> <nav className="flex items-center text-center gap-7 font-semibold text-gray-400"> <Link href={'/login'}>Login</Link> <Link href={'/register'} className="bg-primary px-8 py-2 rounded-full">Register</Link> </nav> </header> ); } import { Roboto } from 'next/font/google' import './globals.css' import Link from "next/link"; import Header from "@/components/layout/Header"; const roboto= Roboto({ subsets: ['latin'], weight:['400', '500', '700']}) export const metadata = { title: 'Create Next App', description: 'Generated by create next app', } export default function RootLayout({ children }) { return ( <html lang="en"> <body> <main className="max-w-6xl mx-auto p-4"> <Header/> {children} <footer className="border-t p-8 text-center text-gray-500 mt-16"> © 2023 All rights reserved </footer> </main> </body> </html> ) } 
