In order to enhance the performance of images in my nextjs app, I am working on image optimization. However, I encountered an issue stating: Cannot find module '/images/homeBg.jpg' or its corresponding type declarations.
The image is actually stored in public/images/name.jpg.
import { Layout } from '@common';
import Trips from '@ui/Trips/Trips';
import Image from 'next/image';
import bgImage from '/images/homeBg.jpg';
const HomePage = () => {
return (
<div className="relative h-screen w-full">
<Image
src={bgImage}
fill
className="-z-10 object-cover"
alt="backgound_image_for_home_page"
/>
<div className="mx-auto flex h-full w-full max-w-[2000px] flex-col space-y-10 px-7 py-36 lg:px-14">
<h3 className="text-3xl font-normal leading-10 tracking-wider text-white lg:text-4xl">
Welcome back, <br /> <span className="font-bold">Nedim!</span>
</h3>
<Trips />
</div>
</div>
);
};
export default HomePage;
HomePage.layout = Layout;