What is my mistake in deploying Next Js App? - deployment

Question

I have an error when I deploy the project in Vercel.
My Error
https://nextjs.org/telemetry
info - Checking validity of types...
info - Creating an optimized production build...
Failed to compile.
./components/Footer.js
Module not found: Can't resolve 'next/Image' in '/vercel/path0/components'
Import trace for requested module:
./components/Layout.js
./pages/_app.js
> Build failed because of webpack errors
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Error: Command "yarn run build" exited with 1
But in footer I write import Image from "next/Image";
My footer
import React from "react";
import Link from "next/link";
import Image from "next/Image";
import Logo from "../public/images/Logo.svg";
import { useRouter } from "next/router";
import EnvelopeIcon from "../public/images/envelope.svg";
import PhoneIcon from "../public/images/phone.svg";
import MapChecker from "../public/images/map-marker-check.svg";
const Footer = () => {
const router = useRouter();
return (
<footer>
<div className="footer-context container">
<div className="footer-navbar">
<div className="logo">
<Link href={"/"}>
<Image src={Logo} alt="GlobalSoft logo" />
</Link>
</div>
</div>
<div className="line"></div>
<div className="footer-info">
<div className="card envelope">
<a href="mailto:info#globalsoft.az">
<div className="card-image">
<Image src={EnvelopeIcon} alt="Envelope Icon" />{" "}
</div>
</a>
</div>
<div className="card phone">
<a href="tel:[phone] ">
<div className="card-image">
<Image src={PhoneIcon} alt="Phone Icon" />{" "}
</div>
</a>
</div>
<div className="card address">
<a target="_blank" rel="noopener noreferrer" href="https://goo.gl/maps/FzvbQnQEtpZCPKLm8">
<div className="card-image">
<Image src={MapChecker} alt="Map Check Icon" />{" "}
</div>
</a>
</div>
</div>
</div>
</footer>
);
};
export default Footer;

Answer 1

The Image component requires width and weight to be specified.