I'm currently facing an issue while working on my Next.js project. The problem arises when I attempt to import a component into my 'page.js' file. In the 'src' folder, I have a subdirectory named 'components' which contains a file called 'Header.js'. Within this file, there is a function component called 'Header'. My import statement in 'page.js' looks like this:
import Header from "@/components/Header";
However, I am encountering the following error: Module not found: Can't resolve '@/components/Header'
I have double-checked to ensure that the file exists in the correct location and that the path is accurate. For reference, here is the structure of my project:
src/
├── components/
│ └── Header.js
└── pages/
└── page.js
Header.js
export default function Header() {
return(
<header className="bg-white border-b flex justify-between p-4">
<div className='flex gap-6'>
<Link href={'/'}>Linkify</Link>
<nav className='flex items-center gap-4 text-slate-500 text-sm'>
<Link href={'/about'}>About</Link>
<Link href={'/pricing'}>Pricing</Link>
<Link href={'/contact'}>Contact</Link>
</nav>
</div>
<nav className='flex items-center gap-4 text-sm text-slate-500'>
<Link href={'/login'}>Sign In</Link>
<Link href={'/register'}>Create Account</Link>
</nav>
</header>
)
}
page.js
import Header from "@/components/Header";
export default function Home() {
return (
<main>
<Header />
<section>
</section>
</main>
)
}
If you have any suggestions or solutions, your help would be greatly appreciated. Thank you!